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

Question

Я считаю, что код работает так, как я задумал (я думаю).Но последний шаг, на котором я печатаю данные, кажется неправильным.То, как я объединяю 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>

Answer 1

Вы можете присвоить значения свойству 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('');

<ul id="list"></ul>

Answer 2

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

• Используйте Object.values() вместо создания [] и нажатия на него.
• Вы можете использовать forEach() вместопросто для циклов
• Вы должны использовать Шаблон строки для создания строки 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>`)
})