将 JSON 数据转换为 HTML 表格答案

【问题标题】：Convert JSON data to HTML table将 JSON 数据转换为 HTML 表格
【发布时间】：2017-09-02 19:42:10
【问题描述】：

我有一个像

这样的 JSON 代码

{
"id": 114363527,
"userId": "1",
"uploadedBy": "JaisonJustus",
"dataSource": "gdocs",
"rowcount": "3",
"colcount": "3",
"data": {
    "0": {
        "rowName": "",
        "rowId": "2",
        "colName": "Category Name",
        "colId": "A",
        "value": "Beverages"
    },
    "1": {
        "rowName": "",
        "rowId": "2",
        "colName": "Quantity",
        "colId": "B",
        "value": "925"
    },
    "2": {
        "rowName": "",
        "rowId": "2",
        "colName": "Amount",
        "colId": "C",
        "value": "$277"
    },
    "3": {
        "rowName": "",
        "rowId": "3",
        "colName": "Category Name",
        "colId": "A",
        "value": "Condiments"
    },
    "4": {
        "rowName": "",
        "rowId": "3",
        "colName": "Quantity",
        "colId": "B",
        "value": "378"
    },
    "5": {
        "rowName": "",
        "rowId": "3",
        "colName": "Amount",
        "colId": "C",
        "value": "$107"
    },
    "6": {
        "rowName": "",
        "rowId": "4",
        "colName": "Category Name",
        "colId": "A",
        "value": "Confections"
    },
    "7": {
        "rowName": "",
        "rowId": "4",
        "colName": "Amount",
        "colId": "C",
        "value": "$22877"
    }
}
}

我需要使用 js/jquery 之类的方式在 html 表中显示值

     A           B           C
--|-----------|-------- |-------------|-
 2|Beverages  |   925   |    $277     |           
 3|Condiments |   378   |    $107     |   
 4|Confections|    --   |    $22877   |   
  |           |         |             |

JSON 也可能包含空值。这些字段根据 rowId 和 colId 显示。表值显示在 JSON 字段“值”中。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

一种方法：

http://www.json.org/

使用上面的链接获取处理 JSON 响应的函数并包含在你的 js 文件中

/*setting the var to hold the json array*/
var jsonReturn = xmlhttp.responseText;

/*parse the JSON data using the JSON function from the JSON website*/
var jsonReturn = json_parse(jsonReturn);

/*now you can access all the data in the typical javascript array format... eg:*/
var returnedID = jsonReturn.id;
var userId = jsonReturn.userId;

/*repeat the above to get all the data you need*/
 /*.......
      ........*/

/*now you can loop through the data array*/
for(var x=0; x < jsonReturn.data.length; x++)
 {
   var rowName = jsonReturn.data[x].rowName;
   var rowId= jsonReturn.data[x].rowId;
   var colName= jsonReturn.data[x].colName;
   var colId= jsonReturn.data[x].colId;
   var value= jsonReturn.data[x].value;

   /** now you have all the data you need from the JSON response you can bever away and generate the table **/
 }

【讨论】：

【解决方案2】：

SlickGrid 将允许您这样做。您可能需要稍微转换数据模型以使其符合预期，但 SlickGrid 有一个模型系统允许这样做（RemoteModel 中的更高级示例之一，用于通过 AJAX 检索的数据）。

（严格来说，您不会从中得到一个 HTML <table/>，而是一些 <div/> 元素。）

【讨论】：

【解决方案3】：

我用 http://datatables.net/usage/ 哪个更简单，或者 http://www.trirand.com/blog/ 具有更多功能。

【讨论】：