Vue, compare two arrays and check if results match
up vote
1
down vote
favorite
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 v-for 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?
- A section has a name, rows and seats.
- A group has a name, rows and a seat.
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.
The JavaScript part 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);
});
},
}
The HTML loop to show the sections, but not the occupied seat
<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 JSON file (part)
{
"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"
}
]
}
]}
javascript json vue.js
edited Nov 10 at 0:39
DarkSuniuM
799919
asked Nov 10 at 0:10
Tobias Boon
83
add a comment |
up vote
1
down vote
favorite
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 v-for 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?
- A section has a name, rows and seats.
- A group has a name, rows and a seat.
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.
The JavaScript part 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);
});
},
}
The HTML loop to show the sections, but not the occupied seat
<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 JSON file (part)
{
"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"
}
]
}
]}
javascript json vue.js
edited Nov 10 at 0:39
DarkSuniuM
799919
asked Nov 10 at 0:10
Tobias Boon
83
From your sample data it seems that thesectionspart does not contain the seats that are in thegroupspart and vice versa. Is this representative? Does that mean that reserved seats only appear ingroupsand that those insectionsall represent free seats?
– trincot
Nov 10 at 0:26
sections are all available seats. groups are the reserved seats.
– Tobias Boon
Nov 10 at 0:31
This is not the final data. But the issue is how to compare both arrays and let them communicate to find matches.
– Tobias Boon
Nov 10 at 0:37
1
Just to be sure. You write sections are all available seats. Do you mean all seats, or all free seats? "Available" is ambiguous here.
– trincot
Nov 10 at 0:57
free seats, possible seats.
– Tobias Boon
Nov 10 at 1:00
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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 v-for 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?
- A section has a name, rows and seats.
- A group has a name, rows and a seat.
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.
The JavaScript part 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);
});
},
}
The HTML loop to show the sections, but not the occupied seat
<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 JSON file (part)
{
"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"
}
]
}
]}
javascript json vue.js
edited Nov 10 at 0:39
DarkSuniuM
799919
asked Nov 10 at 0:10
Tobias Boon
83
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 v-for 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?
- A section has a name, rows and seats.
- A group has a name, rows and a seat.
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.
The JavaScript part 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);
});
},
}
The HTML loop to show the sections, but not the occupied seat
<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 JSON file (part)
{
"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"
}
]
}
]}
javascript json vue.js
javascript json vue.js
edited Nov 10 at 0:39
DarkSuniuM
799919
asked Nov 10 at 0:10
Tobias Boon
83
edited Nov 10 at 0:39
DarkSuniuM
799919
asked Nov 10 at 0:10
Tobias Boon
83
edited Nov 10 at 0:39
DarkSuniuM
799919
edited Nov 10 at 0:39
DarkSuniuM
799919
edited Nov 10 at 0:39
DarkSuniuM
799919
799919
asked Nov 10 at 0:10
Tobias Boon
83
asked Nov 10 at 0:10
Tobias Boon
83
asked Nov 10 at 0:10
Tobias Boon
83
83
From your sample data it seems that thesectionspart does not contain the seats that are in thegroupspart and vice versa. Is this representative? Does that mean that reserved seats only appear ingroupsand that those insectionsall represent free seats?
– trincot
Nov 10 at 0:26
sections are all available seats. groups are the reserved seats.
– Tobias Boon
Nov 10 at 0:31
This is not the final data. But the issue is how to compare both arrays and let them communicate to find matches.
– Tobias Boon
Nov 10 at 0:37
1
Just to be sure. You write sections are all available seats. Do you mean all seats, or all free seats? "Available" is ambiguous here.
– trincot
Nov 10 at 0:57
free seats, possible seats.
– Tobias Boon
Nov 10 at 1:00
add a comment |
From your sample data it seems that thesectionspart does not contain the seats that are in thegroupspart and vice versa. Is this representative? Does that mean that reserved seats only appear ingroupsand that those insectionsall represent free seats?
– trincot
Nov 10 at 0:26
sections are all available seats. groups are the reserved seats.
– Tobias Boon
Nov 10 at 0:31
This is not the final data. But the issue is how to compare both arrays and let them communicate to find matches.
– Tobias Boon
Nov 10 at 0:37
1
Just to be sure. You write sections are all available seats. Do you mean all seats, or all free seats? "Available" is ambiguous here.
– trincot
Nov 10 at 0:57
free seats, possible seats.
– Tobias Boon
Nov 10 at 1:00
From your sample data it seems that the
sections part does not contain the seats that are in the groups part and vice versa. Is this representative? Does that mean that reserved seats only appear in groups and that those in sections all represent free seats?– trincot
Nov 10 at 0:26
From your sample data it seems that the
sections part does not contain the seats that are in the groups part and vice versa. Is this representative? Does that mean that reserved seats only appear in groups and that those in sections all represent free seats?– trincot
Nov 10 at 0:26
sections are all available seats. groups are the reserved seats.
– Tobias Boon
Nov 10 at 0:31
sections are all available seats. groups are the reserved seats.
– Tobias Boon
Nov 10 at 0:31
This is not the final data. But the issue is how to compare both arrays and let them communicate to find matches.
– Tobias Boon
Nov 10 at 0:37
This is not the final data. But the issue is how to compare both arrays and let them communicate to find matches.
– Tobias Boon
Nov 10 at 0:37
1
1
Just to be sure. You write sections are all available seats. Do you mean all seats, or all free seats? "Available" is ambiguous here.
– trincot
Nov 10 at 0:57
Just to be sure. You write sections are all available seats. Do you mean all seats, or all free seats? "Available" is ambiguous here.
– trincot
Nov 10 at 0:57
free seats, possible seats.
– Tobias Boon
Nov 10 at 1:00
free seats, possible seats.
– Tobias Boon
Nov 10 at 1:00
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
You could mutate the json variable so that the seats part gets extended with groupId properties in case the same seat is found in the groups section:
json.groups.forEach( ({id, seats}) =>
seats.forEach( ({section, row, seat}) =>
json.sections.find(s => s.name == section)
.rows.find(r => r.row == row)
.seats.find(s => s.seat == seat)
.groupId = id
)
);
This code assumes that seat references in the groups part always exist in the sections part. If not, you'll get an exception.
Now you can test the presence of the groupId property in your rendering loop and act accordingly.
When invalid seats occur
In case your groups data references sections, rows or seats that don't exist in the sections part, then an exception will be thrown. If you want to get more details about what is missing, then use this more elaborate code. It will list the offending section/row/seat:
json.groups.forEach( ({id, seats}) =>
seats.forEach( ({section, row, seat}) => {
const foundSection = json.sections.find(s => s.name == section);
if (!foundSection) throw "Section " + section + " is referenced in groups, but that section does not exist in sections";
const foundRow = foundSection.rows.find(r => r.row == row);
if (!foundRow) throw "Section " + section + ", row " + row + " is referenced in groups, but that section/row does not exist in sections";
const foundSeat = foundRow.seats.find(s => s.seat == seat);
if (!foundSeat) throw "Section " + section + ", row " + row + ", seat " + seat + " is referenced in groups, but that section/row/seat does not exist in sections";
foundSeat.groupId = id;
})
);
Based on that information fix your input data so that a match can be made for every seat.
Rendering
The rendering part could use the v-if and v-else attributes:
{{ item.seat }}
<span v-if="'groupId' in item">occupied</span>
<span v-else>free</span>
answered Nov 10 at 0:55
trincot
114k1477109
I'm able to add this to axios but it says: Cannot set property 'groupId' of undefined. Also i'm not sure how to test the presence of the 'groupId' property
– Tobias Boon
Nov 10 at 1:50
The first error means that yourgroupshas references to seats that don't exist insections. That is what I asked about. If that cannot be guaranteed, please explain what the rule is. You can use things like<div v-if="groupId in item">occupied</div><div v-else>free</div>.
– trincot
Nov 10 at 8:46
Almost, first of all, your solution works excellent and it is very clear now how to handle the process. With console.log every match is showed in my debugger, but in the app the only results I see are "free" and not "occupied". I added groupId: too else it couldn't find the variable. All references match by the way.
– Tobias Boon
Nov 10 at 12:05
Indeed, there were single quotes missing in the final code block of my answer; Please see edit. For this to work you should not addgroupId:. It is not intended to be an array, and the idea was for the property to not be present when the seat is free.
– trincot
Nov 10 at 12:27
It's working, thank you very much, you made my day!
– Tobias Boon
Nov 10 at 12:28
|
show 1 more comment
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
You could mutate the json variable so that the seats part gets extended with groupId properties in case the same seat is found in the groups section:
json.groups.forEach( ({id, seats}) =>
seats.forEach( ({section, row, seat}) =>
json.sections.find(s => s.name == section)
.rows.find(r => r.row == row)
.seats.find(s => s.seat == seat)
.groupId = id
)
);
This code assumes that seat references in the groups part always exist in the sections part. If not, you'll get an exception.
Now you can test the presence of the groupId property in your rendering loop and act accordingly.
When invalid seats occur
In case your groups data references sections, rows or seats that don't exist in the sections part, then an exception will be thrown. If you want to get more details about what is missing, then use this more elaborate code. It will list the offending section/row/seat:
json.groups.forEach( ({id, seats}) =>
seats.forEach( ({section, row, seat}) => {
const foundSection = json.sections.find(s => s.name == section);
if (!foundSection) throw "Section " + section + " is referenced in groups, but that section does not exist in sections";
const foundRow = foundSection.rows.find(r => r.row == row);
if (!foundRow) throw "Section " + section + ", row " + row + " is referenced in groups, but that section/row does not exist in sections";
const foundSeat = foundRow.seats.find(s => s.seat == seat);
if (!foundSeat) throw "Section " + section + ", row " + row + ", seat " + seat + " is referenced in groups, but that section/row/seat does not exist in sections";
foundSeat.groupId = id;
})
);
Based on that information fix your input data so that a match can be made for every seat.
Rendering
The rendering part could use the v-if and v-else attributes:
{{ item.seat }}
<span v-if="'groupId' in item">occupied</span>
<span v-else>free</span>
answered Nov 10 at 0:55
trincot
114k1477109
I'm able to add this to axios but it says: Cannot set property 'groupId' of undefined. Also i'm not sure how to test the presence of the 'groupId' property
– Tobias Boon
Nov 10 at 1:50
The first error means that yourgroupshas references to seats that don't exist insections. That is what I asked about. If that cannot be guaranteed, please explain what the rule is. You can use things like<div v-if="groupId in item">occupied</div><div v-else>free</div>.
– trincot
Nov 10 at 8:46
Almost, first of all, your solution works excellent and it is very clear now how to handle the process. With console.log every match is showed in my debugger, but in the app the only results I see are "free" and not "occupied". I added groupId: too else it couldn't find the variable. All references match by the way.
– Tobias Boon
Nov 10 at 12:05
Indeed, there were single quotes missing in the final code block of my answer; Please see edit. For this to work you should not addgroupId:. It is not intended to be an array, and the idea was for the property to not be present when the seat is free.
– trincot
Nov 10 at 12:27
It's working, thank you very much, you made my day!
– Tobias Boon
Nov 10 at 12:28
|
show 1 more comment
up vote
0
down vote
accepted
You could mutate the json variable so that the seats part gets extended with groupId properties in case the same seat is found in the groups section:
json.groups.forEach( ({id, seats}) =>
seats.forEach( ({section, row, seat}) =>
json.sections.find(s => s.name == section)
.rows.find(r => r.row == row)
.seats.find(s => s.seat == seat)
.groupId = id
)
);
This code assumes that seat references in the groups part always exist in the sections part. If not, you'll get an exception.
Now you can test the presence of the groupId property in your rendering loop and act accordingly.
When invalid seats occur
In case your groups data references sections, rows or seats that don't exist in the sections part, then an exception will be thrown. If you want to get more details about what is missing, then use this more elaborate code. It will list the offending section/row/seat:
json.groups.forEach( ({id, seats}) =>
seats.forEach( ({section, row, seat}) => {
const foundSection = json.sections.find(s => s.name == section);
if (!foundSection) throw "Section " + section + " is referenced in groups, but that section does not exist in sections";
const foundRow = foundSection.rows.find(r => r.row == row);
if (!foundRow) throw "Section " + section + ", row " + row + " is referenced in groups, but that section/row does not exist in sections";
const foundSeat = foundRow.seats.find(s => s.seat == seat);
if (!foundSeat) throw "Section " + section + ", row " + row + ", seat " + seat + " is referenced in groups, but that section/row/seat does not exist in sections";
foundSeat.groupId = id;
})
);
Based on that information fix your input data so that a match can be made for every seat.
Rendering
The rendering part could use the v-if and v-else attributes:
{{ item.seat }}
<span v-if="'groupId' in item">occupied</span>
<span v-else>free</span>
answered Nov 10 at 0:55
trincot
114k1477109
I'm able to add this to axios but it says: Cannot set property 'groupId' of undefined. Also i'm not sure how to test the presence of the 'groupId' property
– Tobias Boon
Nov 10 at 1:50
The first error means that yourgroupshas references to seats that don't exist insections. That is what I asked about. If that cannot be guaranteed, please explain what the rule is. You can use things like<div v-if="groupId in item">occupied</div><div v-else>free</div>.
– trincot
Nov 10 at 8:46
Almost, first of all, your solution works excellent and it is very clear now how to handle the process. With console.log every match is showed in my debugger, but in the app the only results I see are "free" and not "occupied". I added groupId: too else it couldn't find the variable. All references match by the way.
– Tobias Boon
Nov 10 at 12:05
Indeed, there were single quotes missing in the final code block of my answer; Please see edit. For this to work you should not addgroupId:. It is not intended to be an array, and the idea was for the property to not be present when the seat is free.
– trincot
Nov 10 at 12:27
It's working, thank you very much, you made my day!
– Tobias Boon
Nov 10 at 12:28
|
show 1 more comment
up vote
0
down vote
accepted
up vote
0
down vote
accepted
You could mutate the json variable so that the seats part gets extended with groupId properties in case the same seat is found in the groups section:
json.groups.forEach( ({id, seats}) =>
seats.forEach( ({section, row, seat}) =>
json.sections.find(s => s.name == section)
.rows.find(r => r.row == row)
.seats.find(s => s.seat == seat)
.groupId = id
)
);
This code assumes that seat references in the groups part always exist in the sections part. If not, you'll get an exception.
Now you can test the presence of the groupId property in your rendering loop and act accordingly.
When invalid seats occur
In case your groups data references sections, rows or seats that don't exist in the sections part, then an exception will be thrown. If you want to get more details about what is missing, then use this more elaborate code. It will list the offending section/row/seat:
json.groups.forEach( ({id, seats}) =>
seats.forEach( ({section, row, seat}) => {
const foundSection = json.sections.find(s => s.name == section);
if (!foundSection) throw "Section " + section + " is referenced in groups, but that section does not exist in sections";
const foundRow = foundSection.rows.find(r => r.row == row);
if (!foundRow) throw "Section " + section + ", row " + row + " is referenced in groups, but that section/row does not exist in sections";
const foundSeat = foundRow.seats.find(s => s.seat == seat);
if (!foundSeat) throw "Section " + section + ", row " + row + ", seat " + seat + " is referenced in groups, but that section/row/seat does not exist in sections";
foundSeat.groupId = id;
})
);
Based on that information fix your input data so that a match can be made for every seat.
Rendering
The rendering part could use the v-if and v-else attributes:
{{ item.seat }}
<span v-if="'groupId' in item">occupied</span>
<span v-else>free</span>
answered Nov 10 at 0:55
trincot
114k1477109
You could mutate the json variable so that the seats part gets extended with groupId properties in case the same seat is found in the groups section:
json.groups.forEach( ({id, seats}) =>
seats.forEach( ({section, row, seat}) =>
json.sections.find(s => s.name == section)
.rows.find(r => r.row == row)
.seats.find(s => s.seat == seat)
.groupId = id
)
);
This code assumes that seat references in the groups part always exist in the sections part. If not, you'll get an exception.
Now you can test the presence of the groupId property in your rendering loop and act accordingly.
When invalid seats occur
In case your groups data references sections, rows or seats that don't exist in the sections part, then an exception will be thrown. If you want to get more details about what is missing, then use this more elaborate code. It will list the offending section/row/seat:
json.groups.forEach( ({id, seats}) =>
seats.forEach( ({section, row, seat}) => {
const foundSection = json.sections.find(s => s.name == section);
if (!foundSection) throw "Section " + section + " is referenced in groups, but that section does not exist in sections";
const foundRow = foundSection.rows.find(r => r.row == row);
if (!foundRow) throw "Section " + section + ", row " + row + " is referenced in groups, but that section/row does not exist in sections";
const foundSeat = foundRow.seats.find(s => s.seat == seat);
if (!foundSeat) throw "Section " + section + ", row " + row + ", seat " + seat + " is referenced in groups, but that section/row/seat does not exist in sections";
foundSeat.groupId = id;
})
);
Based on that information fix your input data so that a match can be made for every seat.
Rendering
The rendering part could use the v-if and v-else attributes:
{{ item.seat }}
<span v-if="'groupId' in item">occupied</span>
<span v-else>free</span>
answered Nov 10 at 0:55
trincot
114k1477109
edited Nov 10 at 12:26
answered Nov 10 at 0:55
trincot
114k1477109
answered Nov 10 at 0:55
trincot
114k1477109
answered Nov 10 at 0:55
trincot
114k1477109
114k1477109
I'm able to add this to axios but it says: Cannot set property 'groupId' of undefined. Also i'm not sure how to test the presence of the 'groupId' property
– Tobias Boon
Nov 10 at 1:50
The first error means that yourgroupshas references to seats that don't exist insections. That is what I asked about. If that cannot be guaranteed, please explain what the rule is. You can use things like<div v-if="groupId in item">occupied</div><div v-else>free</div>.
– trincot
Nov 10 at 8:46
Almost, first of all, your solution works excellent and it is very clear now how to handle the process. With console.log every match is showed in my debugger, but in the app the only results I see are "free" and not "occupied". I added groupId: too else it couldn't find the variable. All references match by the way.
– Tobias Boon
Nov 10 at 12:05
Indeed, there were single quotes missing in the final code block of my answer; Please see edit. For this to work you should not addgroupId:. It is not intended to be an array, and the idea was for the property to not be present when the seat is free.
– trincot
Nov 10 at 12:27
It's working, thank you very much, you made my day!
– Tobias Boon
Nov 10 at 12:28
|
show 1 more comment
I'm able to add this to axios but it says: Cannot set property 'groupId' of undefined. Also i'm not sure how to test the presence of the 'groupId' property
– Tobias Boon
Nov 10 at 1:50
The first error means that yourgroupshas references to seats that don't exist insections. That is what I asked about. If that cannot be guaranteed, please explain what the rule is. You can use things like<div v-if="groupId in item">occupied</div><div v-else>free</div>.
– trincot
Nov 10 at 8:46
Almost, first of all, your solution works excellent and it is very clear now how to handle the process. With console.log every match is showed in my debugger, but in the app the only results I see are "free" and not "occupied". I added groupId: too else it couldn't find the variable. All references match by the way.
– Tobias Boon
Nov 10 at 12:05
Indeed, there were single quotes missing in the final code block of my answer; Please see edit. For this to work you should not addgroupId:. It is not intended to be an array, and the idea was for the property to not be present when the seat is free.
– trincot
Nov 10 at 12:27
It's working, thank you very much, you made my day!
– Tobias Boon
Nov 10 at 12:28
I'm able to add this to axios but it says: Cannot set property 'groupId' of undefined. Also i'm not sure how to test the presence of the 'groupId' property
– Tobias Boon
Nov 10 at 1:50
I'm able to add this to axios but it says: Cannot set property 'groupId' of undefined. Also i'm not sure how to test the presence of the 'groupId' property
– Tobias Boon
Nov 10 at 1:50
The first error means that your
groups has references to seats that don't exist in sections. That is what I asked about. If that cannot be guaranteed, please explain what the rule is. You can use things like <div v-if="groupId in item">occupied</div> <div v-else>free</div>.– trincot
Nov 10 at 8:46
The first error means that your
groups has references to seats that don't exist in sections. That is what I asked about. If that cannot be guaranteed, please explain what the rule is. You can use things like <div v-if="groupId in item">occupied</div> <div v-else>free</div>.– trincot
Nov 10 at 8:46
Almost, first of all, your solution works excellent and it is very clear now how to handle the process. With console.log every match is showed in my debugger, but in the app the only results I see are "free" and not "occupied". I added groupId: too else it couldn't find the variable. All references match by the way.
– Tobias Boon
Nov 10 at 12:05
Almost, first of all, your solution works excellent and it is very clear now how to handle the process. With console.log every match is showed in my debugger, but in the app the only results I see are "free" and not "occupied". I added groupId: too else it couldn't find the variable. All references match by the way.
– Tobias Boon
Nov 10 at 12:05
Indeed, there were single quotes missing in the final code block of my answer; Please see edit. For this to work you should not add
groupId: . It is not intended to be an array, and the idea was for the property to not be present when the seat is free.– trincot
Nov 10 at 12:27
Indeed, there were single quotes missing in the final code block of my answer; Please see edit. For this to work you should not add
groupId: . It is not intended to be an array, and the idea was for the property to not be present when the seat is free.– trincot
Nov 10 at 12:27
It's working, thank you very much, you made my day!
– Tobias Boon
Nov 10 at 12:28
It's working, thank you very much, you made my day!
– Tobias Boon
Nov 10 at 12:28
|
show 1 more comment
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53234860%2fvue-compare-two-arrays-and-check-if-results-match%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
From your sample data it seems that the
sectionspart does not contain the seats that are in thegroupspart and vice versa. Is this representative? Does that mean that reserved seats only appear ingroupsand that those insectionsall represent free seats?– trincot
Nov 10 at 0:26
sections are all available seats. groups are the reserved seats.
– Tobias Boon
Nov 10 at 0:31
This is not the final data. But the issue is how to compare both arrays and let them communicate to find matches.
– Tobias Boon
Nov 10 at 0:37
1
Just to be sure. You write sections are all available seats. Do you mean all seats, or all free seats? "Available" is ambiguous here.
– trincot
Nov 10 at 0:57
free seats, possible seats.
– Tobias Boon
Nov 10 at 1:00