使用JQuery在HTML表中轉換JSON數組

Question

我的JSON數組，包含日期和鍵值對字母。 我需要將列作為日期值並將行標題作為字母。

{  
   "error":0,
   "data":[  
      {  
         "date":"2017-12-01",
         "A":1,
         "B":2
      },
      {  
         "date":"2017-12-02",
         "A":2,
         "B":3
      }
   ]
}

我想創建如下表

 Alpha 2017-12-01 2017-12-02
  A       1         2
  B       2         3

我的HTML代碼包含用於表格式化的數據表：

<table id="report" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Alpha</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

然后，JQuery ajax獲得調用API的響應：

$.ajax({
    url: 'userData/01/2018',
    success: function(response) {
        let reportData = response.data;
        let i = 0;
        let j = 1;
        let k = 0;

        let table = document.getElementById('report');
        let tr = table.tHead.children[0];

        reportData.forEach(function(data) {
            let row = table.insertRow(j);

            if (i == 0) {
                let th = document.createElement('th');
                th.innerHTML = data.date;
                tr.appendChild(th);
            }
            if (k == 0) {
                let keys = Object.keys(data);

                for (let p = 1; p < keys.length; p++) {
                    let cell = row.insertCell(k);
                    cell.innerHTML = keys[p];
                    for (let q = 1; q < keys.length; q++) {}
                }
            }
        });
    }
});

我能夠將標題插入為表格列，但在數據插入時遇到問題。

Answer 1

您的json字符串略有變化，

HTML：

<table id="report"></table>

---

JavaScript：

var jsonString = '{"error": 0,"Alpha": [{"date": "2017-12-01","A": 1,"B": 2},{"date": "2017-12-02","A": 2,"B": 3}]}';
var s = '';

$.each(JSON.parse(jsonString), function(i, j) {
    if (i == 'Alpha') {
        s += '<thead><th>' + i + '</th>';
        $.each(j, function(k, val) {
            s += '<th>' + val.date + '</th>';
        });
        s += '</thead>';
        $('#report').html(s);
        for (var l = 0; j.length; l++) {
            if (l == 0) {
                s = '<tbody><tr><td> ' + Object.keys(j[l])[l + 1] + ' </td>';
                s += '<td> ' + j[l].A + ' </td><td>' + j[l].B + '</td></tr>';
                $('#report').append(s);
            } else {
                s = '<tr><td>' + Object.keys(j[l])[l + 1] + '</td><td>' + j[l].A + '</td><td>' + j[l].B + '</td></tr>';
                $('#report').append(s);
            }
            s += '</tbody>';      
        }
    }
});

供參考-https://jsfiddle.net/zvxqf9mz/