如何從JSON值創建動態表？

Question

我正在嘗試使用jquery創建動態表。 問題是關鍵值是動態的。

combination_sizetype =  Array ( [0] => 20FR 
            [1] => 20GP 
            [2] => 20HC 
            [3] => 20HD 
            [4] => 20OT 
            [5] => 20RH 
            [6] => 40FR 
            [7] => 40GP 
            [8] => 40HC 
            [9] => 40HD 
            [10] => 40OT 
            [11] => 40RH 
            [12] => 45FR 
            [13] => 45GP 
            [14] => 45HC 
            [15] => 45HD 
            [16] => 45OT 
            [17] => 45RH 
             )

然后我有這樣的json

  out_json = [
    {
    "20FR":"0",
    "20GP":"1",
    "20HC":"0",
    "20HD":"0",
    "20OT":"0",
    "20RH":"2",
    "40FR":"0",
    "40GP":"2",
    "40HC":"0",
    "40HD":"0",
    "40OT":"0",
    "40RH":"1",
    "45FR":"0",
    "45GP":"0",
    "45HC":"0",
    "45HD":"0",
    "45OT":"0",
    "45RH":"0",
    "location":"CHENNAI"
    },{"20FR":"0","20GP":"1","20HC":"0","20HD":"0","20OT":"0","20RH":"0","40FR":"0","40GP":"5","40HC":"0","40HD":"0","40OT":"0","40RH":"0","45FR":"0","45GP":"1","45HC":"0","45HD":"0","45OT":"0","45RH":"0","location":"COLOMBO"},{"20FR":"0","20GP":"5","20HC":"0","20HD":"0","20OT":"0","20RH":"0","40FR":"0","40GP":"1","40HC":"0","40HD":"0","40OT":"0","40RH":"0","45FR":"0","45GP":"0","45HC":"0","45HD":"0","45OT":"0","45RH":"0","location":"DELHI"},{"20FR":"0","20GP":"0","20HC":"0","20HD":"0","20OT":"0","20RH":"0","40FR":"0","40GP":"5","40HC":"0","40HD":"0","40OT":"0","40RH":"0","45FR":"0","45GP":"0","45HC":"0","45HD":"0","45OT":"0","45RH":"0","location":"PORT KLANG"},{"20FR":"2","20GP":"0","20HC":"0","20HD":"0","20OT":"0","20RH":"0","40FR":"0","40GP":"2","40HC":"0","40HD":"0","40OT":"0","40RH":"0","45FR":"0","45GP":"0","45HC":"0","45HD":"0","45OT":"0","45RH":"0","location":"ROTTERDAM"}]

現在我需要像這樣創建表

    ---------------------------
   location | 20FR| 20GP|20HC .....ETC..,|  <th>  <-- combination_sizetype array
    ---------------------------
    chennai  |  0  |  1  |  0 .....ETC., .| <tr><td></td>...</tr>    <-- this rows have to assign from json by using combination_sizetype array
     ....,
    ...,
    ... ,,,
    -----------

請一些幫助或請給我邏輯以制作這張桌子

Answer 1

你可以做這樣的事情，

 var out_json = [{ "20FR": "0", "20GP": "1", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "2", "40FR": "0", "40GP": "2", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "1", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "CHENNAI" }, { "20FR": "0", "20GP": "1", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "5", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "1", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "COLOMBO" }, { "20FR": "0", "20GP": "5", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "1", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "DELHI" }, { "20FR": "0", "20GP": "0", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "5", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "PORT KLANG" }, { "20FR": "2", "20GP": "0", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "2", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "ROTTERDAM" }]; out_json.forEach(function(v, i) { console.log(v); var row = '<tr>', td1 = '', td2 = ''; jQuery.each(v, function(ind, val) { if (i == 0) td1 += '<th>' + ind + '</th>'; td2 += '<td>' + val + '</td>'; }); if (i == 0) row += td1 + '</tr>' row += '<tr>' + td2 + '</tr>'; $('table').append(row); }); 

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

Answer 2

HTML：

<table id="ooo" class="table table-bordered">
        </table>

jQuery的：

<script type="text/javascript">


  out_json = [
        {
            "20FR": "0",
            "20GP": "1",
            "20HC": "0",
            "20HD": "0",
            "20OT": "0",
            "20RH": "2",
            "40FR": "0",
            "40GP": "2",
            "40HC": "0",
            "40HD": "0",
            "40OT": "0",
            "40RH": "1",
            "45FR": "0",
            "45GP": "0",
            "45HC": "0",
            "45HD": "0",
            "45OT": "0",
            "45RH": "0",
            "location": "CHENNAI"
        }, {"20FR": "0", "20GP": "1", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "5", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "1", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "COLOMBO"}, {"20FR": "0", "20GP": "5", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "1", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "DELHI"}, {"20FR": "0", "20GP": "0", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "5", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "PORT KLANG"}, {"20FR": "2", "20GP": "0", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "2", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "ROTTERDAM"}];


     $.each(out_json, function (m, n) {
      var xx, yy = "";
      var row = '<tr>';
        $.each(n, function (a, b) {
          xx += "<td>" + a + "</td>";
          yy += "<td>" + b + "</td>";
       });
      row += xx + '</tr><tr>' + yy + '</tr>';
      $('#ooo').append(row)
   });



$('#ooo tr td:nth-last-child(1)').each(function () {
        var thisv = $(this);
        $(this).closest('tr').prepend(thisv)
        console.log($(this).closest('tr').find('td:nth-child(1)'))
    });
    </script>

Answer 3

要獲取正確的表格，請查看此小提琴或以下代碼段：

  out_json = [{ "20FR": "0", "20GP": "1", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "2", "40FR": "0", "40GP": "2", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "1", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "CHENNAI" }, { "20FR": "0", "20GP": "1", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "5", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "1", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "COLOMBO" }, { "20FR": "0", "20GP": "5", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "1", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "DELHI" }, { "20FR": "0", "20GP": "0", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "5", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "PORT KLANG" }, { "20FR": "2", "20GP": "0", "20HC": "0", "20HD": "0", "20OT": "0", "20RH": "0", "40FR": "0", "40GP": "2", "40HC": "0", "40HD": "0", "40OT": "0", "40RH": "0", "45FR": "0", "45GP": "0", "45HC": "0", "45HD": "0", "45OT": "0", "45RH": "0", "location": "ROTTERDAM" }] var v = $("#data").detach() // detach the element as dom is slow var str = "" str = "<tr>" $.each(out_json[0], function(key, valu) { str = str + "<th>" + key + "</th>" }) str = str + "</tr>" $.each(out_json, function(index, value) { str = str + "<tr>" $.each(value, function(key, valu) { str = str + "<td>" + valu + "</td>" }) str = str + "</tr>" }) v.html(str) $("body").append(v) // append element to the parent, in case example body 

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