如何遍历JSON列表并插入HTML元素？

Question

从ajax请求返回的数据如下所示：

Data = [
    ["18/02/2019", "A"],
    ["19/03/2019", "B"],
    ["21/05/2019", "C"],
]

ajax请求工作正常，我已设法将其存储在函数中名为Data的变量中。

success: function (Data) {
    for(i in Data) {
        // INSERT INTO HTML
    }
}

我已成功迭代Data以获取每个子列表。 就像i 。 我如何在我的HTML中呈现这一点？ 我试图使用document.querySelectorAll('.Appointments').innerHTML = Data[i]; 但是没有用。

预期的结果将在网页上显示，其中每一行都有自己的分隔符。

18/02/2019 A
19/03/2019 B
21/05/2019 C

我是JSON的新手，所以详细解释将非常感谢，谢谢。

Answer 1

您的代码问题：

document.querySelectorAll('.Appointments').innerHTML

上面提供的代码没有多大意义。 querySelectorAll返回类别名称为“Appointments”的HTML元素的集合。

集合没有innerHTML方法，只有HTML元素具有。 这是为了什么目的？

通过id获取元素会更好。

---

for(i in Data) {
     // INSERT INTO HTML
}

上面的代码是循环数组的旧方法。 现在有很多方法可以使用更好的数组。 我建议你查看那个清单 。

我建议使用Array＃map和Array＃join

阵列＃地图：

对于将数据数组转换为HTML字符串数组非常有用。

map（）方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。

阵列＃加入：

将HTML字符串数组转换为一个完整的字符串非常有用。

join（）方法通过连接数组（或类数组对象）中的所有元素（用逗号或指定的分隔符字符串分隔）来创建并返回一个新字符串。 如果数组只有一个项目，那么将返回该项目而不使用分隔符。

解：

使用Array＃map和Array＃join。 这是我经常使用的东西，我觉得最具可读性。

此解决方案还使用解构 （使用[date, label]的部分）。

 const data = [ ["18/02/2019", "A"], ["19/03/2019", "B"], ["21/05/2019", "C"], ]; document.getElementById("appointments") .innerHTML = data //transform array of data to arrray of HTML string .map(([date, label])=>(`<li>${date} : ${label}</li>`)) //transform array of HTML string to a single string of HTML .join(""); 

 <ul id="appointments"></ul> 

Answer 2

document.querySelector('#a').innerHTML = Data.map(arr => arr.join(' ') + '<br/>')

Answer 3

您可以使用以下代码。

 const data = [ ["18/02/2019", "A"], ["19/03/2019", "B"], ["21/05/2019", "C"], ] let li, ul; function createList(data) { for (let i of data) { ul = document.getElementById("list"); li = document.createElement("li"); li.innerHTML = i[0] + " " + i[1]; ul.appendChild(li); } } createList(data); 

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