Вывести массив объектов в DOM в том порядке, в котором они записаны

Question

Дан массив объектов, мне нужно вывести их в ДОМ-дерево в виде карточек, но в том порядке, в котором они написаны. Когда я записываю вывод этих объектов в ДОМ (вывожу через template, который написан в html) в функцию, и потом вызываю её, я получаю эти объекты/карточки в алфавитном порядке. Как вывести в первоначальном порядке? (где Петров будет идти первым, Иванова второй и т.д.). Если вывожу обычным foreach'ом, всё выводится корректно, но нужно именно через функцию.

const users = [
  {
    "first name": "Алексей",
    "last name": "Петров",
    photo: "./img/trainers/trainer-m1.jpg",
  },
  {
    "first name": "Марина",
    "last name": "Иванова",
    photo: "./img/trainers/trainer-f1.png",
  },
  {
    "first name": "Игорь",
    "last name": "Сидоренко",
    photo: "./img/trainers/trainer-m2.jpg",
  },
  {
    "first name": "Татьяна",
    "last name": "Мороз",
    photo: "./img/trainers/trainer-f2.jpg",
  },
  {
    "first name": "Сергей",
    "last name": "Коваленко",
    photo: "./img/trainers/trainer-m3.jpg",
  },
]

const trainerCardTemplate = document.querySelector('#trainer-card');
const trainersCardsContainer = document.querySelector('.trainers-cards__container');

function renderTrainerCards() {
  users.forEach((e) => {
    let clone = trainerCardTemplate.content.cloneNode(true);
    let cardTemplateImage = clone.querySelector('img');
    let cardTemplateTrainerName = clone.querySelector('.trainer__name');
    
    cardTemplateImage.src = e.photo;
    cardTemplateTrainerName.innerText = `${e["last name"]} ${e["first name"]}`;
    
    trainersCardsContainer.append(clone);
  });
};

document.addEventListener("DOMContentLoaded", renderTrainerCards);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

.trainers-cards__container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  
  width: 100%:
}

.trainers-cards__container div {
  width: 50%;
  border: 1px solid;
}

<template id="trainer-card">
  <div>
    <h2 class="trainer__name"></h2>
    <img />
  </div>
</template>

<div class="trainers-cards__container"></div>

БЛОГ НА HUSL

Вывести массив объектов в DOM в том порядке, в котором они записаны

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