javascript - 如何从 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>