Объединение данных из многомерного массива и HTML

Я обнаружил, что код работает так, как я предполагал (я думаю). Но последний шаг, на котором я печатаю данные, кажется неправильным. То, как я объединяю html и js, кажется немного неправильным. Есть ли лучший способ объединить это? Я использую неправильное решение для печати данных?

// Этот список я использую внутри своего массива.

    const myList = {
        Germany : {name : 'Germany', capital: 'Berlin', visited: 'Checked' },
        Italy : {name : 'Italy', capital: 'Rome', visited: 'Checked' },
        Spain : {name : 'Spain', capital: 'Madrid', visited: 'unchecked' },
    }

// Мой массив

    const destinations = [];

// Отправляем данные из myList в массив назначения.

    for(var key in myList) {
        destinations.push(myList[key]);
    }

// Вот так я записываю свои данные на страницу.

    for (var i = 0; i < destinations.length; i++) {
    document.write("<li><h1>" + destinations[i].name + "</h1><p>" + 
                   destinations[i].capital + 
                   "<input type='checkbox'" + destinations[i].visited + ">")
    };

Это то, что я планирую написать в конце.

<li class = "all-destinations">
    <h3>destinations[i].name</h3>
    <div class = "container">
        <label class = "switch">
        <input type = "checkbox" destinations[i].visited>
        </label>
    </div>
    <p>destinations[i].capital</p>
    <hr>
</li>

Вместо того, чтобы перебирать ключи myList, вы можете просто сделать: const destinations = Object.values(myList)

— 12.05.2019 09:32

Вы можете сделать это лучше, переместив логику конкатенации в отдельную функцию, которая возвращает только html. Таким образом, это будет работать как шаблон.

— 12.05.2019 09:37

javascript html multidimensional-array

12.05.2019 09:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы улучшили свой код тремя способами:

Используйте Object.values() вместо того, чтобы создавать [] и нажимать на него.
Вы можете использовать forEach() вместо простых циклов for
Вы должны использовать Строки шаблона для создания строки html.

const myList = {
        Germany : {name : 'Germany', capital: 'Berlin', visited: 'Checked' },
        Italy : {name : 'Italy', capital: 'Rome', visited: 'Checked' },
        Spain : {name : 'Spain', capital: 'Madrid', visited: 'unchecked' },
    }
    
const list = Object.values(myList);

list.forEach(x => {
  document.write(
  `<li class = "all-destinations">
      <h3>${x.name}</h3>
      <div class = "container">
        <label class = "switch">
          <input type = "checkbox" ${x.visited}>
        </label>
      </div>
      <p>${x.capital}</p>
      <hr>
  </li>`)
})

Спасибо за отличный вклад! Я многому научился из вашего ответа, но все же решил принять ответ @Nina Scholz как правильный.

— 12.05.2019 14:20

12.05.2019 09:37

Ответ принят как подходящий

Вы можете присвоить значения свойству innerHTML напрямую без document.write, что может не сработать, если страница уже полностью загружена.

function getItems({ name, capital, visited }) {
    return `<li class = "all-destinations">
        <h3>${name}</h3>
        <div class = "container">
            <label class = "switch">
                <input type = "checkbox" ${visited}>
            </label>
        </div>
        <p>${capital}</p>
        <hr>
    </li>`;
}


const myList = { Germany: { name: 'Germany', capital: 'Berlin', visited: 'Checked' }, Italy: { name: 'Italy', capital: 'Rome', visited: 'Checked' }, Spain: { name: 'Spain', capital: 'Madrid', visited: 'unchecked' } };

document.getElementById('list').innerHTML += Object.values(myList).map(getItems).join('');