У меня есть объект со свойствами массива Участники и участникиIdentities.Оба свойства имеют свойство memberId.Как их связать?

Question

В настоящее время я перебираю некоторых участников и показываю статистику для каждого участника, используя Vue.js v-for, однако я также хочу отобразить summonerName этого участника вместе с его статистикой.Проблема в том, что информация о пользователе содержится в memberIdentities, но его статистика содержится в участниках.Я предполагаю, что могу как-то связать два свойства, используя свойство memberId, которое присутствует в обоих случаях, однако я не уверен, как это сделать.Любые советы и указатели будут оценены.

<div class='participant' v-for='participant in match.details.participants'>
    <p>{{ participant.stats.kills }}/</p>
    <p>{{ participant.stats.deaths }}/</p>
    <p>{{ participant.stats.assists }}</p>
</div>

Как выглядят связанные свойства объекта:

details: Object
    participantIdentities: Array(10)
        0:
            participantId: 1
            player: Object
                summonerName: "Test"
                summonerIcon: 1337
    participants: Array(10)
        0:
            participantId: 1
            stats: Object

Answer 1

Вы можете сортировать массивы по id

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

Тогда вы можете просто добавить индекс в v-for и получить элемент массива

<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>

Answer 2

Вы хотите в основном выполнить объединение двух массивов объектов на основе свойства.Мне нравится создавать Карты из моих массивов, а затем использовать синтаксис распространения объекта , чтобы объединить их вместе.Это делается так:

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)