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类元素为“ Appointments”的集合。

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

最好通过id获取元素。

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

上面的代码是遍历数组的一种较旧的方法。现在，存在许多用于数组的方法，它们使用起来要好得多。我建议您检查一下list。

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

Array＃map：

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

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

Array＃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

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>

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

3 个答案:

请输入您的代码：

解决方案：