如何利用具有多個陣列

Question

我試圖來從URL JSON數據，我想使使用JavaScript的HTML表格JSON數據，使表在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>