如何使用具有多个数组的Json数据在Html中创建表

Question

我试图从URL获取json数据，我想使用Javascript在HTML中创建一个表。

请建议我怎么做。

JSON数据：

[{
  "name": "External System",
  "data": ["CHAT", "EMAIL", "EVENTMANAGEMENT", "INSTANTMESSAGING", "PHONECALL", "SELFSERVICE"]
}, {
  "name": "CANCELLED",
  "data": [0, 2, 263, 0, 3, 1]
}, {
  "name": "CLOSED",
  "data": [2, 36, 4057, 1, 279, 10]
}, {
  "name": "INPROG",
  "data": [0, 2, 15, 0, 4, 0]
}, {
  "name": "NEW",
  "data": [0, 0, 0, 0, 0, 0]
}, {
  "name": "PENDING",
  "data": [0, 0, 0, 0, 0, 0]
}, {
  "name": "QUEUED",
  "data": [0, 0, 36, 0, 1, 0]
}, {
  "name": "RESOLVED",
  "data": [0, 5, 79, 0, 3, 1]
}, {
  "name": "SLAHOLD",
  "data": [0, 4, 3, 0, 5, 0]
}]

预期的表格视图：

Answer 1

您可以尝试使用此Javascript解决方案：

<强>假设

• 所有data属性在其值
中具有相同的数组长度
• 给定数组中的第一项包含每行的标题

var arr = [{
  "name": "External System",
  "data": ["CHAT", "EMAIL", "EVENTMANAGEMENT", "INSTANTMESSAGING", "PHONECALL", "SELFSERVICE"]
}, {
  "name": "CANCELLED",
  "data": [0, 2, 263, 0, 3, 1]
}, {
  "name": "CLOSED",
  "data": [2, 36, 4057, 1, 279, 10]
}, {
  "name": "INPROG",
  "data": [0, 2, 15, 0, 4, 0]
}, {
  "name": "NEW",
  "data": [0, 0, 0, 0, 0, 0]
}, {
  "name": "PENDING",
  "data": [0, 0, 0, 0, 0, 0]
}, {
  "name": "QUEUED",
  "data": [0, 0, 36, 0, 1, 0]
}, {
  "name": "RESOLVED",
  "data": [0, 5, 79, 0, 3, 1]
}, {
  "name": "SLAHOLD",
  "data": [0, 4, 3, 0, 5, 0]
}];

// Build <thead>
document.getElementById('myTable').appendChild(getHeader(arr));

function getHeader(arr) {
  var thead = document.createElement('thead');
  var row = document.createElement('tr');
  for (var h in arr) {
    var cell = document.createElement('th');
    cell.innerHTML = arr[h].name;
    row.appendChild(cell);
  }

  // Append totals column
  var totals = document.createElement('th');
  totals.innerHTML = 'TOTALS';
  row.appendChild(totals);

  thead.appendChild(row);
  return thead;
}

// Build <tbody>
var firstItemData = arr[0].data;
var tbody = document.createElement('tbody'); 
for (var n in firstItemData) {
  var row = document.createElement('tr');
  for (var c in arr) {
    var cell = document.createElement('td');
    cell.innerHTML = arr[c].data[n];
    row.appendChild(cell);
  }
  // Append totals cell
  var cell = document.createElement('td');
  row.appendChild(cell);

  tbody.appendChild(row);
}
document.getElementById('myTable').appendChild(tbody);

// Calculate totals (Right)
var tbodyRows = document.getElementById('myTable').children[1].children;
for (var row = 0; row<tbodyRows.length-1;row++) {
   var thisRow = tbodyRows[row];
   var total = 0;
   for (var r=1;r<thisRow.children.length-1;r++) {               
      total += parseFloat(thisRow.children[r].innerHTML);
   }
   thisRow.children[thisRow.children.length-1].innerHTML = total;
}

// Calculate totals bottom   
var totalsObj = {}; 
for (var row = 0; row<tbodyRows.length-1;row++) {
   var thisRow = tbodyRows[row];
   for (var r=1;r<thisRow.children.length;r++) {               
      var thisCell = thisRow.children[r].innerHTML;
      if (totalsObj.hasOwnProperty(r)) {
         totalsObj[r] += parseFloat(thisCell);
      } else {
         totalsObj[r] = parseFloat(thisCell);
      }
   }
}

// Build <tfoot>
var tfoot = document.createElement('tfoot');
var totalsRow = document.createElement('tr');
var totalCell = document.createElement('td');
totalCell.innerHTML = 'TOTALS';
totalsRow.appendChild(totalCell);
for (var prop in totalsObj) {
   var cell = document.createElement('td');
   cell.innerHTML = totalsObj[prop];
   totalsRow.appendChild(cell);
}
tfoot.appendChild(totalsRow);

document.getElementById('myTable').appendChild(tfoot);

body { font-family:Arial }

thead th,
tfoot td { 
   background-color:#337ab7;
   color: #fff;
}
th,td { padding:5px 10px }
tr:nth-child(even) td { background-color:#ececec }

<table id="myTable"></table>

Answer 2

另一个快速jQuery实现......

 $(document).ready(function(){
 
   var tableData = [


      {external_system:"CHAT",cancelled:0,closed:2,inprog:0,new:0,pending:0,queued:0,resolved:0,slahold:0},
      {external_system:"EMAIL",cancelled:2,closed:36,inprog:2,new:0,pending:0,queued:5,resolved:0,slahold:0}


   ]

   var tableFields = [

      {title:"External System",dataValueField:"external_system"},
      {title:"CANCELLED",dataValueField:"cancelled"},
      {title:"CLOSED",dataValueField:"closed"},
      {title:"INPROG",dataValueField:"inprog"},
      {title:"NEW",dataValueField:"new"},
      {title:"PENDING",dataValueField:"pending"},
      {title:"QUEUED",dataValueField:"queued"},
      {title:"RESOLVED",dataValueField:"resolved"},
      {title:"SLAHOLD",dataValueField:"slahold"}

   ]



  var tableHead = '<thead><tr>';

  $(tableFields).each(function (i, e) {

    tableHead += '<th>' + e.title + '</th>';

  });

  tableHead += '</tr></thead>';


  var tableBody = '<tbody>';

  $(tableData).each(function (i, e) {

      tableBody += '<tr>';

      $(tableFields).each(function (_i, _e) {

          tableBody += '<td>' + e[_e.dataValueField] + '</td>';

      });

      tableBody += '</tr>';

  });

  tableBody += '<tbody>';

  $("#sample").html(tableHead+tableBody);

});

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