如何遍歷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>