Это правильный способ создания списка из массива с объектами?

Question

Я недавно изучил немного ES6.Я следую курсу Уэса Боса «ES6 для всех» и хотел сам написать несколько сценариев, чтобы проверить, сколько я получаю ценной информации.

В этом коде я пытаюсь составить список HTML из указанной переменнойкоторый является массивом с объектами внутри.Итак, в конце концов я заставил этот код работать, но я не уверен, что это правильный способ сделать это, не могли бы вы, ребята, взглянуть на него и сказать, что можно исправить и изменить для лучшего решения?Спасибо

const list = document.createElement('ul');
const students = [{
    name: 'Tom',
    gpa: 4.2,
    course: 'MKDf-16/1',
    gender: 'male'
  },
  {
    name: 'Artiom',
    gpa: 2.2,
    course: 'MKDf-16/1',
    gender: 'male'
  },
  {
    name: 'Alison',
    gpa: 4.8,
    course: 'MKDf-16/2',
    gender: 'female'
  },
  {
    name: 'John',
    gpa: 4.1,
    course: 'MKDf-16/5',
    gender: 'male'
  }
];

const output = students.map(student => {
  return `
            ${student.name}'s GPA is ${student.gpa}
        `
});

output.forEach((x, index) => {
  console.log(output[index]);
  let listItem = document.createElement('li');
  listItem.innerHTML = output[index];
  list.appendChild(listItem);
});

document.body.appendChild(list);

Answer 1

«Правильный» способ, вероятно, не использует innerHTML для анализа содержимого, которое включает внешние данные.Намного лучше было бы на самом деле создавать элементы <li> и устанавливать вместо них textContent, избегая безумия очистки и цитирования.

К сожалению, базовый синтаксис Javascript для создания элементов и установки их содержимого довольно уродлив иподробный.В моем коде обычно я получаю вспомогательную функцию для этого и такой код:

el("ul", {},
   ...(content.map(x =>
       el("li", {textContent: `${x.name} GPA is ${x.gpa}`}))));

может создать узел ul, содержащий один узел li для каждого элемента в content массив.

Не требуется анализ HTML, не требуется цитирование или очистка.

Answer 2

const students = [{
    name: 'Tom',
    gpa: 4.2,
    course: 'MKDf-16/1',
    gender: 'male'
  },
  {
    name: 'Artiom',
    gpa: 2.2,
    course: 'MKDf-16/1',
    gender: 'male'
  },
  {
    name: 'Alison',
    gpa: 4.8,
    course: 'MKDf-16/2',
    gender: 'female'
  },
  {
    name: 'John',
    gpa: 4.1,
    course: 'MKDf-16/5',
    gender: 'male'
  }
];

const list = document.createElement('ul');
list.innerHTML = students.map(ob => `<li>${ob.name}'s GPA is ${ob.gpa}</li>`).join("");
document.body.appendChild(list);