将 JSON 解析为干净的 HTML 视图

Question

我正在编写 JSON 代码。例如：

{"resultSet":{"arrival":[{"feet":null,"departed":false,"scheduled":1460553672000,"
shortSign":"34 To Oregon City TC","detoured":false,"tripID":"6317022","dir":0,
"blockID":3402,"route":34,"piece":"1","fullSign":"34 River Rd to Oregon City TC",
"id":"6317022_22872_13","vehicleID":null,"locid":10,"newTrip":false,
"status":"scheduled"}],"queryTime":1460522014873,
"location":[{"lng":-122.603190086107,"passengerCode":"E","id":10,
"dir":"Southbound","lat":45.3847203071942,"desc":"Abernethy & Barclay"}]}}

我需要将其转换为 HTML 表格视图。

但 JSON 数据可能并不总是呈现相同的结构。它可以像这样不同。

{"resultSet":{"arrival":[{"feet":50907,"inCongestion":false,"departed":false,
"scheduled":1460524334000,"loadPercentage":0,"shortSign":"78 To Beaverton TC",
"estimated":1460524334000,"detoured":false,"tripID":"6322386","dir":1,
"blockID":7672,"route":78,"piece":"1","fullSign":"78  Beaverton TC",
"id":"6322386_79934_12","vehicleID":"2918","locid":1233,"newTrip":false,
"status":"estimated"},{"feet":null,"departed":false,"scheduled":1460528004000,
"shortSign":"78 To Beaverton TC","detoured":false,"tripID":"6322387","dir":1,
"blockID":7867,"route":78,"piece":"1","fullSign":"78  Beaverton TC",
"id":"6322387_83604_12","vehicleID":null,"locid":1233,"newTrip":false,
"status":"scheduled"},{"feet":null,"departed":false,"scheduled":1460557107000,
"shortSign":"37 To Tualatin P&R","detoured":false,"tripID":"6317319","dir":0,
"blockID":3767,"route":37,"piece":"1",
"fullSign":"37  Lake Grove to Tualatin Park & Ride","id":"6317319_26307_13",
"vehicleID":null,"locid":1233,"newTrip":false,"status":"scheduled"}],
"queryTime":1460522323801,"location":[{"lng":-122.697651868185,
"passengerCode":"E","id":1233,"dir":"Westbound","lat":45.423844983607,
"desc":"Country Club & Wembley Park"}]}}

如何在 HTML 表格视图中实现结果？

Answer 1

恐怕这很优雅，但我最终还是得到了解决方案。 ;-)

也许您可以使用一些想法...（例如使用函数 getkeys() 收集属性...）

// first test case:
var dat={"resultSet":{"arrival":[{"feet":50907,"inCongestion":false,"departed":false,
"scheduled":1460524334000,"loadPercentage":0,"shortSign":"78 To Beaverton TC",
"estimated":1460524334000,"detoured":false,"tripID":"6322386","dir":1,
"blockID":7672,"route":78,"piece":"1","fullSign":"78  Beaverton TC",
"id":"6322386_79934_12","vehicleID":"2918","locid":1233,"newTrip":false,
"status":"estimated"},{"feet":null,"departed":false,"scheduled":1460528004000,
"shortSign":"78 To Beaverton TC","detoured":false,"tripID":"6322387","dir":1,
"blockID":7867,"route":78,"piece":"1","fullSign":"78  Beaverton TC",
"id":"6322387_83604_12","vehicleID":null,"locid":1233,"newTrip":false,
"status":"scheduled"},{"feet":null,"departed":false,"scheduled":1460557107000,
"shortSign":"37 To Tualatin P&R","detoured":false,"tripID":"6317319","dir":0,
"blockID":3767,"route":37,"piece":"1",
"fullSign":"37  Lake Grove to Tualatin Park & Ride","id":"6317319_26307_13",
"vehicleID":null,"locid":1233,"newTrip":false,"status":"scheduled"}],
"queryTime":1460522323801,"location":[{"lng":-122.697651868185,
"passengerCode":"E","id":1233,"dir":"Westbound","lat":45.423844983607,
"desc":"Country Club & Wembley Park"}]}};
// second test case with missing "arrival" sub-array:
var dat ={"resultSet":{"queryTime":1460959167994,"location":[{"lng":-122.79683594921,
          "pas‌​sengerCode":"E","id":997,"dir":"Southbound",
          "lat":45.506252040801,"desc":"SW Cedar Hills & Berkshire"}]}};

var maxr=0;
function getkeys(arr) { var keys={};
  // the following "if ... else" was added to deal with missing sub-arrays:                      
  if (arr) {arr.forEach(function(o,i){for (a in o) keys[a]=1;});
  var ret=Object.keys(keys); if ((ret.len=arr.length)>maxr)  maxr=ret.len;
  } else ret=[];
  // ret.len is the number of rows found in the array arr
  // and should not be confused with ret.length (=the length of ret)
  return ret;
}
var rs=dat.resultSet,
    okeys={rs:getkeys([rs]),arrival:getkeys(rs.arrival),location:getkeys(rs.location)};

// first title row
var r=[okeys.rs.map(function(rk){
       return '<th'+(okeys[rk]?' colspan="'+okeys[rk].length+'"':'')+'>'+rk+'</th>';}).join('')],
    tmp=[];

// second title row
okeys.rs.forEach(function(rk){
       if (okeys[rk]) [].push.apply(tmp,okeys[rk]); // push a group of columns
       else           tmp.push(rk);                 // push a single column into array tmp
});
r.push('<td>'+tmp.join('</td><td>')+'</td>');

// data rows
for (i=0;i<maxr;i++){ tmp=[];
 okeys.rs.forEach(function(rk){var ok=okeys[rk],l,td;
   if (ok) { l=ok.len; td='<td'+(maxr>l && l==i+1?' rowspan="'+(maxr-i)+'">':'>');   
     if (i<l) [].push.apply(tmp,ok.map(function(k){return td+(rs[rk][i][k]||'')+'</td>';}));
   }
   else if (!i) tmp.push('<td rowspan="'+maxr+'">'+rs[rk]+'</td>');  // push a single column into array tmp
 });
r.push(tmp.join(''));                     
}
// output onto page
document.getElementById("out").innerHTML=
  '<table><tr>'+r.join('</tr>\n<tr>')+'</tr></table>';

th,td {border: solid 1px}

<div id="out"></div>

编辑：
我刚刚在getkeys() 函数中添加了一个if ... else 块来处理okeys-object 中定义的并非所有子数组都存在于dat 中的情况。在最新的测试用例中，子数组“arrival”丢失了。