title: Vue, compare two arrays and check if results match
body: <p>I need to create a theater app. I have a JSON file with two arrays. Sections and groups. I'm able to load both arrays in my Vue app but I need to compare them and find matches. Array 1 contains seats and array 2 contains the reservations. I use a simple <code>v-for</code> attribute to loop trough the first array (sections) and I'm able to show the results/seats. How can I compare array 1 with array 2 and for example add a class to the seat when the objects are the same and if a seat is occupied?</p>
  
  <ul>
  <li>A section has a name, rows and seats.</li>
  <li>A group has a name, rows and a seat.</li>
  </ul>
  
  <p>In my opinion I have to check if seat in a row from a name match with the section. If so I can add the id as a class.</p>
  
  <p>The JavaScript part to load the JSON data</p>
  
  <pre><code>export default {
      name: 'app',
      data() {
          return {
              json: [],
          }
      },
  
      mounted() {
          axios({
              method: "GET",
              "url": url
          }).then(result =&gt; {
              this.json = result.data;
          }, error =&gt; {
              console.log(error);
          });
  
      },
  
  }
  </code></pre>
  
  <p>The HTML loop to show the sections, but not the occupied seat</p>
  
  <pre><code>&lt;div v-for="(item, index) in json.sections" v-bind:key="index"&gt;
    &lt;h3&gt;{{ item.name }}&lt;/h3&gt;
      &lt;div v-for="(item, index) in item.rows" v-bind:key="index"&gt;
        &lt;div class="rownr"&gt;{{ item.row }} &lt;/div&gt;
          &lt;div v-for="(item, index) in item.seats" v bind:key="index"v-bind:class=item.rank&gt;
            &lt;div :class=item.row&gt;
              &lt;div v-for="(group, index) in json.groups" v-bind:key="index"&gt;
                &lt;div v-for="(group, index) in group.seats" v-bind:key="index"&gt;{{ item.seat}}&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JSON file (part)</p>
  
  <pre><code>{
  "sections": [{
          "name": "balcony",
          "rows": [{
                  "row": "1",
                  "seats": [{
                          "seat": "1",
                          "rank": "rank1"
                      },
                      {
                          "seat": "3",
                          "rank": "rank1"
                      },
                      {
                          "seat": "4",
                          "rank": "rank1"
                      },
                      {
                          "seat": "2",
                          "rank": "rank1"
                      }
                  ]
              },
              {
                  "row": "2",
                  "seats": [{
                          "seat": "1",
                          "rank": "rank1"
                      ...
              },
  
          ]
      },
      {
          "name": "main hall",
          "rows": [{
                  "row": "1",
                  "seats": [{
                          "seat": "1",
                          "rank": "rank1"
                      },
                      {
                          "seat": "3",
                          "rank": "rank3"
                      },
                      ...
              {
                  "row": "2",
                  "seats": [{
                          "seat": "1",
                          "rank": "rank2"
                      },
                  }
  ],
  "groups": [{
          "id": "1",
          "seats": [{
                  "section": "main hall",
                  "row": "2",
                  "seat": "4"
              },
              {
                  "section": "main hall",
                  "row": "1",
                  "seat": "2"
              }
          ]
      },
      {
          "id": "2",
          "seats": [{
                  "section": "main hall",
                  "row": "2",
                  "seat": "6"
              },
              {
                  "section": "main hall",
                  "row": "2",
                  "seat": "5"
              }
          ]
      }
  ]}
  </code></pre>