Импорт локального JSON-файла в HTML-таблицу

У меня есть JSON-файл под названием data.формат 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-loop и итерацию через список заголовков:

<!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>";
    }

4 ответа

  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);
    });
    
  2.   var html = "";
      var Myheader = ["Group-of-Signals name", "Group-of-Signals description", "Signal name", "Signal data type", "Signal unit of measurement",
        "Signal description", "Signal ID", "Signal index"
      ];
      $.each(data, function(key, value) {
        html += "<div class=\"row\"></div>";
        Myheader.forEach(function(key) {
          html += "<div class=\"cell\">" + value[key] + "</div>";
    
        })
      });
    
  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>

  4. Добавить еще $.каждый, так что вы можете иметь доступ к заголовку:

    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);