连接来自多维数组和 HTML 的数据答案

【问题标题】：Concatenate data from a multidimensional Array and HTML连接来自多维数组和 HTML 的数据
【发布时间】：2019-05-12 07:29:18
【问题描述】：

我发现代码按我的预期工作（我认为）。但是我打印数据的最后一步感觉不对。我连接 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)
您可以通过将连接逻辑移动到仅返回 html 的单独函数来改善这一点。这样，它就可以像模板一样工作。

标签： javascript html multidimensional-array

【解决方案1】：

您通过三种方式改进了代码：

使用Object.values() 而不是创建[] 并推送到它。
您可以使用 forEach() 而不是简单的 for 循环
您应该使用Template Strings 创建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 的回答作为正确的回答。

【解决方案2】：

您可以在没有document.write 的情况下直接将值分配给innerHTML 属性，如果页面已经完全加载，这可能无法正常工作。

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('');

&lt;ul id="list"&gt;&lt;/ul&gt;

【讨论】：