如何使用JavaScript將嵌套的JSON文件項導出到HTML表？

Question

我正在嘗試將JSON文件數據導出到表中，但是不確定如何訪問JSON文件的嵌套元素。

這是我的JSON：

{
"fruits color": "red",
"farmers market": "2019",
"sellers": [{
    "day": "1",
    "seller": [{
            "name": "John",
            "sales": "50",
            "types": "3",
            "type": [
                "apples",
                "strawberries",
                "rapsberries"
            ]
        },
        {
            "name": "Adam",
            "sales": "45",
            "types": "2",
            "type": [
                "cranberries",
                "redcurrants"
            ]
        }
    ]
}   
]}

我有一個簡單的HTML表單，可以從下拉菜單中選擇文件。

選擇我的文件后，我的JavaScript函數會從文件中提取信息並將其發送到表中：

function fruitSelection() {
var items = document.getElementById("fruit-colors");
var value = items.options[items.selectedIndex].value;
    if (value == "red") {
        JSON = "redfruits.json"
        processFruitsFile()}}

function processFruitsFile() {
  $.getJSON(JSON, function(JSONdata) {
    var JSONItems= [];

$.each(JSONdata, function(key, value) {
        JSONItems.push( "<tr" + key + "'>" + value + "</tr>");
});
    $( "<tr/>", {
        "class": "result-items",
        html: JSONItems.join("")
}).appendTo(result);});}

現在，我遇到的問題是我的函數僅適用於第一個鍵和值對，如下所示： red2019[object Object]

我想要實現的是一張表，其中可以顯示如下內容：

Day Seller Type 1   Type 2        Type 3
1   John   apples   strawberries  raspberries

我該如何訪問嵌套在“賣方”和“水果類型”中的那些值並對其進行格式化？

感謝幫助！

Answer 1

這是使用Javascript做到這一點的方法

 let obj = { "fruits color": "red", "farmers market": "2019", "sellers": [{ "day": "1", "seller": [{ "name": "John", "sales": "50", "types": "3", "types of fruits": [ "apples", "strawberries", "rapsberries" ] }, { "name": "Adam", "sales": "45", "types": "2", "types of fruits": [ "cranberries", "redcurrants" ] } ] } ]} function createTable(obj){ let table = document.createElement('table'); table.className = 'table'; let thead = document.createElement('thead'); let tbody = document.createElement('tbody'); let noOfFriuts = 0; let {sellers} = obj for(let day of sellers){ for(let seller of day.seller){ let tr = document.createElement('tr'); tr.innerHTML += `<td>${day.day}</td>` tr.innerHTML += `<td>${seller.name}</td>` for(let fruit of seller['types of fruits']){ tr.innerHTML += `<td>${fruit}</td>` } noOfFriuts = Math.max(noOfFriuts ,seller['types of fruits'].length); tbody.appendChild(tr) } } let tr = document.createElement('tr'); tr.innerHTML = `<th>Day</th> <th>Name</th>` for(let i = 1;i<=noOfFriuts;i++){ let th = document.createElement('th'); th.innerHTML = `Type ${i}` tr.appendChild(th) } thead.appendChild(tr); table.appendChild(thead); table.appendChild(tbody); document.body.appendChild(table); document.querySelectorAll('tr').forEach(tr => { let dif = -(tr.cells.length - noOfFriuts - 2); for(let i = 0;i<dif;i++) tr.innerHTML += "<td></td>" }) } console.log('x') createTable(obj); 

 table{ padding:2px; border-collapse:collapse; border:2px solid; } td,th{ border:1px solid; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>