Question

我有一个名为data.json的JSON文件：

[{
    "Group-of-Signals name" : "DPI_0",
    "Group-of-Signals description" : "",
    "Signal name" : "EUVPulseCount",
    "Signal data type" : "SDT_STRING",
    "Signal unit of measurement" : "M",
    "Signal description" : "",
    "Signal ID" : "-1",
    "Signal index" : "0",
    "id" : 0
}, {
    "Group-of-Signals name" : "DPI_0",
    "Group-of-Signals description" : "",
    "Signal name" : "EUVState",
    "Signal data type" : "SDT_STRING",
    "Signal unit of measurement" : "",
    "Signal description" : "",
    "Signal ID" : "-1",
    "Signal index" : "1",
    "id" : 1
}, {
    "Group-of-Signals name" : "DPI_0",
    "Group-of-Signals description" : "",
    "Signal name" : "Loop_Name",
    "Signal data type" : "SDT_STRING",
    "Signal unit of measurement" : "",
    "Signal description" : "",
    "Signal ID" : "-1",
    "Signal index" : "2",
    "id" : 2
}, {
    "Group-of-Signals name" : "DPI_0",
    "Group-of-Signals description" : "",
    "Signal name" : "Project_Info",
    "Signal data type" : "SDT_STRING",
    "Signal unit of measurement" : "",
    "Signal description" : "",
    "Signal ID" : "-1",
    "Signal index" : "3",
    "id" : 3
}
]

我得到了这条HTMl代码，它现在可以正常工作，但是我希望通过代码添加标题，而不是告诉脚本编写标题是什么。当这工作时，我可以缩短我的代码，只需使用for循环并通过标题列表迭代：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="test.css"></link>
    </head>
    <body>
        <div class="table">
            <script>
                $.getJSON('./data.json', function (data){
                html = ''
                    $.each(data, function(key, value){
                        html += "<div class=\"row\"></div>";
                        html += "<div class=\"cell\">" + value["Group-of-Signals name"] + "</div>";
                        html += "<div class=\"cell\">" + value["Group-of-Signals description"]  + "</div>";
                        html += "<div class=\"cell\">" + value["Signal name"]   + "</div>";
                        html += "<div class=\"cell\">" + value["Signal data type"]  + "</div>";
                        html += "<div class=\"cell\">" + value["Signal unit of measurement"]    + "</div>";
                        html += "<div class=\"cell\">" + value["Signal description"]    + "</div>";
                        html += "<div class=\"cell\">" + value["Signal ID"] + "</div>";
                        html += "<div class=\"cell\">" + value["Signal index"]  + "</div>";
                    });
                    html += "</div>";
                    $(".table").append(html);
                });
            </script>
        </div>
    </body>
</html>

更新：使用millerf的代码我设法获取数据，但现在我仍然必须声明这样的键：

var headers = ["name", "description", "name", "data type", "unit of measurement", "description", "id", "index", "ID"]
$.getJSON('./data.json', function (data){
    html = ''
    for (i=0; i<headers.length; i++) {
        html += "<div class=\"cell\">" + headers[i] + "</div>";
    }

Answer 1

您可以像这样修改代码：

$.getJSON('./data.json', function(data) {
    html = ''
    var headersPrinted = false;        
    var keys = [];
    for(var i in data) {
        if(headersPrinted == false) {                
            html += "<div class=\"header row\">";
            for(var name in data[i]) {
                html += "<div class=\"cell\">" + name + "</div>";
                keys.push(name);
            }
            html += "</div>"
            headersPrinted = true;
        }
        html += "<div class=\"row\"></div>";
        for(var key in keys){
            html += "<div class=\"cell\">" + data[i][keys[key]] + "</div>";
        }
    }        
    html += "</div>";
    $(".table").append(html);
});

Answer 2

if (isIntersect == isReversed) { ... }

Answer 3

使用Object.keys()很容易做到这一点;）

var json = [{
    "Group-of-Signals name" : "DPI_0",
    "Group-of-Signals description" : "",
    "Signal name" : "EUVPulseCount",
    "Signal data type" : "SDT_STRING",
    "Signal unit of measurement" : "M",
    "Signal description" : "",
    "Signal ID" : "-1",
    "Signal index" : "0",
    "id" : 0
}, {
    "Group-of-Signals name" : "DPI_0",
    "Group-of-Signals description" : "",
    "Signal name" : "EUVState",
    "Signal data type" : "SDT_STRING",
    "Signal unit of measurement" : "",
    "Signal description" : "",
    "Signal ID" : "-1",
    "Signal index" : "1",
    "id" : 1
}, {
    "Group-of-Signals name" : "DPI_0",
    "Group-of-Signals description" : "",
    "Signal name" : "Loop_Name",
    "Signal data type" : "SDT_STRING",
    "Signal unit of measurement" : "",
    "Signal description" : "",
    "Signal ID" : "-1",
    "Signal index" : "2",
    "id" : 2
}, {
    "Group-of-Signals name" : "DPI_0",
    "Group-of-Signals description" : "",
    "Signal name" : "Project_Info",
    "Signal data type" : "SDT_STRING",
    "Signal unit of measurement" : "",
    "Signal description" : "",
    "Signal ID" : "-1",
    "Signal index" : "3",
    "id" : 3
}
];

var html = '';

   $.each(json, function(key, value){
     if(key === 0) {
         html += "<div class=\"row\">";
         $.each(Object.keys(value), function(k, v) {
           html += "<div class=\"cell\">" + v + "</div>";
         });
         html += "</div>";
       }
     
     html += "<div class=\"row\">";
         $.each(Object.keys(value), function(k, v) {
           html += "<div class=\"cell\">" + value[v] + "</div>";
         });
         html += "</div>";

   });
console.log(html)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

添加另一个$ .each，以便您可以访问标题：

html = ''
$.each(data, function(key, value){
  html += "<div class=\"row\">";
  $.each(value, function(header, value2){
    html += "<div class=\"cell\">" + value2+ "</div>";
  })
  html += "</div>"
});
html += "</div>";
$(".table").append(html);

将本地JSON文件导入HTML表

4 个答案: