JSON到表填寫

Question

這裏空白格式化是我的JSON的例子：

{ 
    "2017-05-06": { 
     "13": { 
      "Chris": "2", "Ian": "3" 
     }, 
     "14": { 
      "Chris": "4", "Rob": "4" 
     }, 
     "16": { 
      "Ian": "3", "Rob": 2 
     } 
    } 
} 

理想情況下，我需要用JS能在表格中顯示它，並與用零填充任何間隙，列標題（小時）依次排列，即使它們是空的，以及總的列和行。

2017-05-06 
     13 14 15 16 T 
Chris 2 4 0 0 6 
Ian  3 0 0 3 6 
Rob  0 4 0 2 6 
Total 5 8 0 5 18 

我不知道從哪裏開始，所以真的很感謝任何幫助或建議！

Answer 1

我會首先製作兩個數組，一個用於行，另一個用於列，它包含您要顯示的所有行和列標題/鍵。然後迭代行數組/列數組來構建一個表，如果有數據爲行+列編寫，否則寫入零。保持總變量總和。

var data = { 
 
    "2017-05-06": { 
 
    "13": {"Chris": "2", "Ian": "3"}, 
 
    "14": {"Chris": "4", "Rob": "4"}, 
 
    "16": {"Ian": "3", "Rob": 2} 
 
    } 
 
}; 
 

 
var d = data['2017-05-06']; 
 

 
var keys = Object.keys(d).sort(); 
 
// from the lowest and highest "hours" values, create an array containing everything in between too 
 
var hours = []; 
 
for (var i = keys[0]; i <= keys[keys.length - 1]; i++) { 
 
    hours.push(i); 
 
} 
 

 
// get the unique names 
 
var names = []; 
 
for (var k in d) { 
 
    for (var l in d[k]) { 
 
    if (names.indexOf(l) === -1) names.push(l); 
 
    } 
 
} 
 
var colTotals = {'total':0}; 
 
var tbl = "<table><thead><tr><th>Name</th>"; 
 
for (var i=0,h; h = hours[i]; i++) { 
 
    tbl += "<th>" + h + "</th>"; 
 
    colTotals[h] = 0; 
 
} 
 
tbl += "<th>Total</th></tr></thead><tbody>"; 
 
for (var i=0,n; n = names[i]; i++) { 
 
    tbl += "<tr><td>" + n + "</td>"; 
 
    var total = 0; 
 
    for (var j=0,h; h = hours[j]; j++) { 
 
    tbl += "<td>"; 
 
    // if data contains values for this row/col, add to total and table, otherwise put a zero 
 
    if (d[h] && d[h][n]) { 
 
     total += (d[h][n] - 0); 
 
     colTotals[h] += (d[h][n] - 0);  
 
     
 
     tbl += d[h][n]; 
 
    } else { 
 
     tbl += "0"; 
 
    } 
 
    tbl += "</td>"; 
 
    } 
 
    colTotals['total'] += total; 
 
    tbl += "<td>" + total + "</td></tr>"; 
 
} 
 
tbl += "<tr><td></td>"; 
 
for (var i=0,h; h = hours[i]; i++) { 
 
    tbl += "<td>" + colTotals[h] + "</td>"; 
 
} 
 
tbl += "<td>" + colTotals['total'] + "</td></tr>"; 
 
tbl += "</tbody></table>"; 
 

 
document.getElementById('t').innerHTML = tbl;

<div id='t'></div>

Answer 2

你可以收集給定對象的所有總量和收集的行和列，以及缺少的，然後重複的行和列，並與給定的數據創建表。

var data = { "2017-05-06": { 13: { Chris: "2", Ian: "3" }, 14: { Chris: "4", Rob: "4" }, 16: { Ian: "3", Rob: 2 } } }; 
 

 
Object.keys(data).forEach(function (k) { 
 
    var table = document.createElement('table'), 
 
     rows = [], 
 
     cols = Object.keys(data[k]) 
 
      .sort(function (a, b) { return a - b; }) 
 
      .reduce(function (r, a) { 
 
       var i = +r[r.length - 1]; 
 
       while (++i < a) { 
 
        r.push(i.toString()); 
 
       } 
 
       r.push(a); 
 
       return r; 
 
      }, []); 
 

 
    data[k].total = { total: 0 }; 
 

 
    cols.forEach(function (l) { 
 
     var sub = data[k][l] || {}; 
 
     Object.keys(sub).forEach(function (m) { 
 
      if (rows.indexOf(m) === -1) { 
 
       rows.push(m); 
 
      } 
 
      data[k].total[m] = (data[k].total[m] || 0) + +sub[m]; 
 
      data[k].total.total += +sub[m]; 
 
      sub.total = (sub.total || 0) + +sub[m]; 
 
     }); 
 
    }); 
 

 
    cols.unshift(''); 
 
    cols.push('total'); 
 
    rows.unshift(''); 
 
    rows.push('total') 
 
    rows.forEach(function (r) { 
 
     var tr = document.createElement('tr'); 
 
     cols.forEach(function (c) { 
 
      var t = document.createElement(r && c ? 'td' : 'th'), 
 
       v = r && c ? (data[k][c] || {})[r] || 0 : r || c; 
 

 
      t.appendChild(document.createTextNode(v)); 
 
      if (v == +v) { 
 
       t.style.textAlign = 'right'; 
 
      } 
 
      tr.appendChild(t); 
 
     }); 
 
     table.appendChild(tr); 
 
    }); 
 
    document.body.appendChild(document.createTextNode(k)); 
 
    document.body.appendChild(document.createElement('br')); 
 
    document.body.appendChild(table); 
 
});

Answer 3

我的解決辦法是我拿出分鐘小時，最大小時作爲列名，並獲取不同的名稱，該行的名稱，然後循環的行和列從數據對象數據添加到該表中，如果沒有數據，默認值爲0。

var jsonData = `{ 
 
    "2017-05-06": { 
 
    "13": { 
 
     "Chris": "2", "Ian": "3" 
 
    }, 
 
    "14": { 
 
     "Chris": "4", "Rob": "4" 
 
    }, 
 
    "16": { 
 
     "Ian": "3", "Rob": 2 
 
    } 
 
    } 
 
}`; 
 

 
var objData, obj, arrName, arrHour, minHour, maxHour, 
 
    table, row, cell, caption; 
 

 
objData = JSON.parse(jsonData); 
 
obj = objData["2017-05-06"]; 
 

 
arrHour = Object.keys(obj); 
 
minHour = Math.min(...arrHour); 
 
maxHour = Math.max(...arrHour); 
 

 
arrName = []; 
 

 
for (let i in obj) { 
 
    for (let j in obj[i]) { 
 
    if (!arrName.includes(j)) { 
 
     arrName.push(j); 
 
    } 
 
    } 
 
} 
 

 
table = document.createElement("table"); 
 
table.cellPadding = 2; 
 
table.style.fontFamily = "monospace"; 
 
table.style.textAlign = "center"; 
 

 
caption = table.createCaption(); 
 
caption.innerText = "2017-05-06"; 
 
caption.style.textAlign = "left"; 
 
row = table.insertRow(); 
 
row.insertCell(); 
 

 
for (let i = minHour; i <= maxHour; i++) { 
 
    cell = row.insertCell(); 
 
    cell.innerText = i; 
 
} 
 

 
cell = row.insertCell(); 
 
cell.innerText = "Tt"; 
 

 
for (let i = 0; i < arrName.length; i++) { 
 
    let totalRow = 0; 
 

 
    row = table.insertRow(); 
 
    cell = row.insertCell(); 
 
    cell.style.textAlign = "left"; 
 
    cell.innerText = arrName[i]; 
 
    
 
    for (let j = minHour; j <= maxHour; j++) { 
 
    cell = row.insertCell(); 
 

 
    if (obj[j] !== undefined) { 
 
     if (obj[j][arrName[i]] !== undefined) { 
 
     cell.innerText = obj[j][arrName[i]]; 
 
     totalRow += +obj[j][arrName[i]]; 
 
     } 
 
     else { 
 
     cell.innerText = 0; 
 
     } 
 
    } 
 
    else { 
 
     cell.innerText = 0; 
 
    } 
 
    } 
 
    
 
    cell = row.insertCell(); 
 
    cell.innerText = totalRow; 
 
} 
 

 
row = table.insertRow(); 
 
row.innerText = "Total"; 
 

 
for (let i = 0; i <= maxHour - minHour + 1; i++) { 
 
    let totalCol = 0; 
 
    cell = row.insertCell(); 
 

 
    for (let j = 0; j < arrName.length; j++) { 
 
    totalCol += +table.rows[j + 1].cells[i + 1].innerText; 
 
    } 
 

 
    cell.innerText = totalCol; 
 
} 
 

 
document.body.appendChild(table);