title: Import local JSON-file into HTML-table
body: <p>I have a JSON-file called data.json:</p>
  
  <pre><code>[{
      "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
  }
  ]
  </code></pre>
  
  <p>And I got this piece of HTMl-code which works right now, but I would like to have the headers added by code and not telling the script harcoded what the headers are. When this works, I can shorten my code and just use a for-loop and iterate trough the list of headers:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="test.css"&gt;&lt;/link&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="table"&gt;
              &lt;script&gt;
                  $.getJSON('./data.json', function (data){
                  html = ''
                      $.each(data, function(key, value){
                          html += "&lt;div class=\"row\"&gt;&lt;/div&gt;";
                          html += "&lt;div class=\"cell\"&gt;" + value["Group-of-Signals name"] + "&lt;/div&gt;";
                          html += "&lt;div class=\"cell\"&gt;" + value["Group-of-Signals description"]  + "&lt;/div&gt;";
                          html += "&lt;div class=\"cell\"&gt;" + value["Signal name"]   + "&lt;/div&gt;";
                          html += "&lt;div class=\"cell\"&gt;" + value["Signal data type"]  + "&lt;/div&gt;";
                          html += "&lt;div class=\"cell\"&gt;" + value["Signal unit of measurement"]    + "&lt;/div&gt;";
                          html += "&lt;div class=\"cell\"&gt;" + value["Signal description"]    + "&lt;/div&gt;";
                          html += "&lt;div class=\"cell\"&gt;" + value["Signal ID"] + "&lt;/div&gt;";
                          html += "&lt;div class=\"cell\"&gt;" + value["Signal index"]  + "&lt;/div&gt;";
                      });
                      html += "&lt;/div&gt;";
                      $(".table").append(html);
                  });
              &lt;/script&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>UPDATE:
  With the code of millerf I managed to get the data but now I still have to declare the keys like this:</p>
  
  <pre><code>var headers = ["name", "description", "name", "data type", "unit of measurement", "description", "id", "index", "ID"]
  $.getJSON('./data.json', function (data){
      html = ''
      for (i=0; i&lt;headers.length; i++) {
          html += "&lt;div class=\"cell\"&gt;" + headers[i] + "&lt;/div&gt;";
      }
  </code></pre>