Как добавить новый элемент в объект массива по условию?

Question

[ByJumping]

Есть 2 массива:

const test = [
        { title: 'Название 1', id: 4 },
        { title: 'Название 2', id: 2 },
        { title: 'Название 3', id: 3 },
        { title: 'Название 4', id: 1 },
      ];

      const testResult = [
        { id: 1, count: 234 },
        { id: 2, count: 344 },
        { id: 3, count: 5678 },
        { id: 4, count: 3421 },
      ];

В массив testResult нужно добавить новые свойства 'title', id должны соответствовать названию. То есть, по итогу получить массив

const testResult = [
        { id: 1, count: 234, title: 'Название 4' },
        { id: 2, count: 344 , title: 'Название 3'  },
        { id: 3, count: 5678, title: 'Название 2'  },
        { id: 4, count: 3421, title: 'Название 1'  },
      ];

Comments

[Alex_mos]

А есть какие нибудь наработки?

Answer 1

[Олег Барабанов]

Может этот пример вам поможет? Пример работы можно посмотреть на codepen

const newTestResult = testResult.map(item => ({
  ...item,
  title: test.find(subItem => subItem.id === item.id)?.title,
}));
console.log(newTestResult);

Comments

[WbICHA]

Ммм, мутация исходного объекта, прекрасно.)

[ByJumping]

WbICHA, а это отличается от решения, которое написал 0xD34F?

[Олег Барабанов]

WbICHA, благодарю за внимание - поправил.

[ByJumping]

Олег Барабанов, спасибо большое)) супер решение

[ByJumping]

Олег Барабанов, а что означает ((subItem) => subItem.id === it.id)? ?

[Олег Барабанов]

ByJumping, Давайте разберем эту часть кода:

test.find(subItem => subItem.id === item.id)?.title

1) Метод .find() производит поиск элементов в массиве с помощью callback-функции. Эта функция должна возвращать true или false - как признак найденного элемента.
2) Соответственно subItem => subItem.id === item.id - это простая стрелочная функция, которая просто возвращает true или false, ибо выражение subItem.id === item.id может быть только булевым (элементы равны - true, неравны - false). Метод .find() запускает эту функцию для каждого элемента массива до тех пор, пока не получит первое равенство. Если .find() не получил какого-либо равенства - возвращается undefined.
3) ?. - это optional chaining operator. Т.к. .find() у нас может вернуть не только найденный объект, но и undefined (если ничего не найдено). И соответственно если .find ничего не нашел, а мы сразу напрямую обращаемся к свойству .title - то будет ошибка (Что-то типа "Uncaught TypeError: Cannot read properties of undefined (reading 'title')")

Надеюсь как-то смог прояснить.