Как пройтись по массиву и то что в ключе вставить в html тег?

Question

Как на чистом js пройтись по массиву и то что в ключе head вставить в html класс head ?

Сравнение ключей id и item обязательно одновременно, записей может быть много, тоесть если они совпадают то делать вставку

let items = [
  {id: 12, item: 123, head: 'Запись 1'},
  {id: 33, item: 765, head: 'Запись 2'}
];

<div class="items">
  <div data-id="12" data-item="123">
    <span class="head"></span>
  </div>
  <div data-id="33" data-item="765">
    <span class="head"></span>
  </div>
</div>

Answer 1

Сперва собрал все HTML-элементы .head в отдельный объект, в котором ключами являются строки id + разделитель + item. Теперь через цикл по массиву, из id + item каждого объекта можно собрать такую же строку и проверить его наличие в созданном объекте:

let items = [
  {id: 12, item: 123, head: 'Запись 1'},
  {id: 33, item: 765, head: 'Запись 2'},
  {id: 55, item: 765, head: 'Запись 2'},
];

/***/
let map = {};

document.querySelectorAll('.items .head').forEach(head => {
  let data = head.parentNode.dataset;
  let key = get_key(data.id, data.item);
  
  map[key] = head;
});

/***/
items.forEach(obj => {
  let key = get_key(obj.id, obj.item);
  
  if (key in map) map[key].textContent = obj.head;
});

function get_key(id, item) {
  return id + '@[email protected]' + item; // <-- Здесь могла быть любая другая строка,
  // которая наверняка не встречается в id, item. В том числе и котик ^_^)~
}

<div class="items">
  <div data-id="12" data-item="123">
    <span class="head"></span>
  </div>
  <div data-id="33" data-item="765">
    <span class="head"></span>
  </div>
</div>

Такой подход, конечно, не прям универсальный, т.к. в одном свойстве могло бы случайно оказаться [email protected][email protected] а во втором - пустая строка, и оно бы совпало с другим объектом, где реально есть значения 111 и 22. Но это маловероятная мини-уязвимость.

Существует еще CSS-селекторы атрибутов. [data-id="x"][data-item="y"] .head означает: Найти все class="head", которые находятся где-то внутри (потому что пробел) элемента, у которого одновременно (отсутствие пробела) есть два таких атрибута со значениями x и y. В данном случае, значения атрибутов передаются в виде переменных (шаблонные строки):

let items = [
  {id: 12, item: 123, head: 'Запись 1'},
  {id: 33, item: 765, head: 'Запись 2'},
  {id: 55, item: 765, head: 'Запись 2'},
];

/***/
items.forEach(({id, item, head}) => {
  let select = `[data-id="${id}"][data-item="${item}"] .head`;
  let element = document.querySelector(select);
  
  if (element) element.textContent = head;
});

<div class="items">
  <div data-id="12" data-item="123">
    <span class="head"></span>
  </div>
  <div data-id="33" data-item="765">
    <span class="head"></span>
  </div>
</div>

(подозреваю, будет работать чуть медленнее из-за сложного селектора и поиска для каждого элемента массива. Без измерения - не узнать)

({id, item, head}) называется «деструктурирующее присваивание». Разбирает прилетевший в виде параметра объект и дает переменным значения, имеющиеся у свойств объекта с теми же названиями.

БЛОГ НА HUSL

Как пройтись по массиву и то что в ключе вставить в html тег?

Ответы (1 шт):