[Vuejs]-I have an object with participants and participantsIdentities array properties. Both properties have participantId property. How to link them?

by

0👍

You want to basically perform a join on two arrays of objects based on a property. I like to create Maps from my arrays, then use object spread syntax to join them together. It is done like so:

var a = [{id: 1, name: 'johnny'}, {id: 2, name: 'joey'}];
var b = [{id: 1, type: 24152}, {id: 2, type: 325723}];

// convert the arrays to key/value pair where the key is the id and the value is the object itself 
var mapA = new Map(a.map(x => [x.id, x]));
var mapB = new Map(b.map(x => [x.id, x]));

const merged = [];
for (var [key, val] of mapA) { // iterate through the values of mapA
	merged.push({...val, ...mapB.get(key)}); // Join the object from mapA with the object from mapB using the spread operator 
}

console.log(merged)

0👍

You can sort the arrays by id

participants.sort(function(a, b){return a.id - b.id});
participantIdentities.sort(function(a, b){return a.id - b.id});

Then you can just add the index to the v-for and get the array element

<div class='participant' v-for='(participant, index) in 
match.details.participants'>
    <p>{{ participant.stats.kills }}/</p>
    <p>{{ participant.stats.deaths }}/</p>
    <p>{{ participantIdentities[index].player.summonerName }}</p>
</div>

Leave a comment