如何遍历 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 返回一个类名为“约会”的 HTML 元素的集合。

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

最好是通过id获取元素。

---

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

上面的代码是一种循环遍历数组的旧方法。现在存在许多更好用的数组方法。我建议您查看list。

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

数组#map：

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

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

数组#join：

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

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

解决方案：

使用 Array#map 和 Array#join。这是我经常使用的东西，我发现它最易读。

这个解决方案还使用了destructuring（使用[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

您可以使用下面的代码。

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>

Answer 3

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