I am in the process of developing a theater app that requires me to work with JSON data consisting of two arrays: Sections and Groups. While I have successfully loaded both arrays into my Vue app, I now need to compare them to find matches. The first array contains information about seats, while the second array holds details on reservations. Utilizing the v-for attribute, I can loop through the sections array and display the seats accordingly. However, my challenge lies in comparing array 1 with array 2 and applying certain classes to indicate if a seat is occupied or not.
- A section includes attributes such as name, rows, and seats.
- A group consists of a name, rows, and a seat.
Based on my analysis, I believe I should cross-check if the seat in a specific row aligns with the section's name. If there's a match, I can assign the ID as a class to the seat.
Here is the JavaScript code snippet used to load the JSON data:
export default {
name: 'app',
data() {
return {
json: [],
}
},
mounted() {
axios({
method: "GET",
"url": url
}).then(result => {
this.json = result.data;
}, error => {
console.log(error);
});
},
}
Below is the HTML loop designed to display sections, excluding the occupied seats:
<div v-for="(item, index) in json.sections" v-bind:key="index">
<h3>{{ item.name }}</h3>
<div v-for="(item, index) in item.rows" v-bind:key="index">
<div class="rownr">{{ item.row }} </div>
<div v-for="(item, index) in item.seats" v bind:key="index"v-bind:class=item.rank>
<div :class=item.row>
<div v-for="(group, index) in json.groups" v-bind:key="index">
<div v-for="(group, index) in group.seats" v-bind:key="index">{{ item.seat}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
The excerpt from the JSON file looks like this:
{
"sections": [{
"name": "balcony",
"rows": [{
"row": "1",
"seats": [{
"seat": "1",
"rank": "rank1"
},
...
},
]
},
{
"name": "main hall",
"rows": [{
"row": "1",
"seats": [{
"seat": "1",
"rank": "rank1"
},
...
{
"row": "2",
"seats": [{
"seat": "1",
"rank": "rank2"
},
}
],
"groups": [{
"id": "1",
"seats": [{
"section": "main hall",
"row": "2",
"seat": "4"
},
...
]}