как отобразить свойства двух массивов объектов различной длины в JavaScript

Question

Будучи новичком ie Я нашел эту проблему, которую не знаю, как решить.

Учитывая 2 массива разной длины, я хочу отобразить значение ключевого итога arr2 поверх значение ключа arr1 функция значения ключа grpId arr1, как указано ниже:

 arr1 = [{id: 1, grpId: 'x', total: null},
        {id: 2, grpId: 'x', total: null},
        {id: 3, grpId: 'x', total: null},
        {id: 4, grpId: 'y', total: null},
        {id: 5, grpId: 'y', total: null}];

 arr2 = [{id: 1, grpId: 'x', total: 3},
        {id: 2, grpId: 'y', total: 2}];

Мне нужен результат, как показано ниже:

 arr1 = [{id: 1, grpId: 'x', total: 3},
        {id: 2, grpId: 'x', total: 3},
        {id: 3, grpId: 'x', total: 3},
        {id: 4, grpId: 'y', total: 2},
        {id: 5, grpId: 'y', total: 2}];

Answer 1

Используйте Array.map() до l oop до arr1, а внутри этого l oop до arr2 и присвойте значения total:

let arr1=[{id:1,grpId:"x",total:null},{id:2,grpId:"x",total:null},{id:3,grpId:"x",total:null},{id:4,grpId:"y",total:null},{id:5,grpId:"y",total:null}],arr2=[{id:1,grpId:"x",total:3},{id:2,grpId:"y",total:2}];
        
        
let res = arr1.map(el1 => {
    arr2.forEach(el2 => {
        if(el2.grpId == el1.grpId){
            el1.total = el2.total
        }
    })
    return el1
})

console.log(res)

Answer 2

Попробуйте это:

 const arr1 = [{id: 1, grpId: 'x', total: null},
        {id: 2, grpId: 'x', total: null},
        {id: 3, grpId: 'x', total: null},
        {id: 4, grpId: 'y', total: null},
        {id: 5, grpId: 'y', total: null}];

 const arr2 = [{id: 1, grpId: 'x', total: 3},
        {id: 2, grpId: 'y', total: 2}];

const output = arr1.map(entry => ({
    ...entry,
    total: arr2.find(a2 => a2.grpId === entry.grpId).total
}));

console.log(output);

Должен увидеть вывод в окне консоли. (Инструменты разработчика вашего браузера).