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/

使用JQuery在HTML表中转换JSON数组

1 个答案: