Как передать в функцию рендера html несколько массивов?

Question

[Andy Koshman]

Всем привет, имеется код который реализует рендер данных массива currentTariff объектов в html приблизительно такого вида:
<div class="info"></div>

let currentTariff = [{ //массив из localStorage
    id: 1,
    name: 'Andy',
  },
  {
    id: 2,
    name: 'Bob',
  }
]
let info = document.querySelector('.info')

const render = (x = currentTariff) => {
  [...x].forEach(el =>
    info.insertAdjacentHTML('beforeend',
      `<div>${el.id}</div>
     <div>${el.name}</div>
    `
    )
  )
}
render()

let pets = [{ //массив из localStorage
    id: 1,
    pet: 'Dog',
  },
  {
    id: 2,
    pet: "Cat"
  },
  {
    id: 2,
    pet: 'Parrot',
  }
]

По сути функция render получает как параметр массив currentTariff из localStorage где данные перебираются и рендерятся на страницу. У пользователя есть еще возможность выбрать питомцев и их количество, предположим два пользователя выбрали себе питомцев и сформировался массив pets в localStorage в котором объекты питомцев идентифицируются по id, если у пользователя id: 2 и он выбирает два питомца, то у каждого из питомцев тоже будет id: 2.
Вопрос в том, как правильно "запустить" массив pets в функцию render для отрисовки всех данных pets?
Я пробовал такой вариант:

const render = (x = currentTariff, y = pets) => {
  [...x, ...y].forEach(...)

но он мне не подошел, неправильно рендерится. Может есть еще какие либо варианты?

Comments

[Вадим]

Ну так и укажите чем вам такой вариант не подошёл. В чем разница между текущим результатом и ожидаемым.

P. S. Две записи с одним id - что-то странное

[Andy Koshman]

Да, я знаю что несколько id это неправильно, но в данной задаче условный id подразумевается как номер каюты парома, например 13 и соответственно пассажир находится в 13 каюте и 2 питомца каждый в 13 каюте. Данный вариант решения не подошел потому что при его использовании вместо 1 карточки с рендером данных из currentTariff рендерится еще одна карточка с данными pets и случается бардак. Судя по тому что как вы ответили такой вариант имеет место быть и мне просто нужно разобраться почему оно неправильно рендерит данные.

[Сергей Соколов]

Andy Koshman, т.е. надо сгруппировать по id, и только потом отрисовать?
Только pet'ов группировать, или Bob едет в той же карточке, что и кот с попугаем?

Answer 1

[Сергей Соколов]

Собрать промежуточный словарь, где ключи – id, а значения – массивы имён. Неважно, из тарифов или из pet'ов.

Comments

[Andy Koshman]

Спасибо, абсолютно то что мне нужно. Постараюсь разобраться в вашем коде и понять его.

[Сергей Соколов]

наверное, надо пояснить этот момент, самый запутанный:

const ferry = {};
const pusher = prop => item => (ferry[item.id] ??= []).push(item[prop]);
currentTariff.forEach(pusher('name'));
pets.forEach(pusher('pet'));

Будем заполнять изначально пустой объект ferry.
Одинаковые действия для двух массивов, отличие только в названии свойства с именем: "name" или "pet".
Действие такое: для каждого элемента берём его id, и смотрим, есть ли уже такой ключ в объекте ferry?
Если вдруг нет, то записываем под этим ключом пустой массив.
Это делается с помощью оператора ??= — он положит пустой массив [] в ferry[item.id] только этот id ещё неизвестен ferry.
Ну и в любом случае, в этот массив допишем очередное имя: .push(item[prop])

Тут в первом случае будет .push(item['name']) — это то же, что .push(item.name). Во втором — вместо "name" будет "pet".

В итоге ferry станет примерно такой:

{
  1: ['Andy', 'Dog'],
  2: ['Bob', 'Cat', 'Parrot'],
}