如何過濾不同鍵值的 json 數據並使用該鍵值創建新的 json 元素而無需硬編碼數據

Question

 <table> <tr> <th>Net Weight</th> <th>Net Weight Count</th> <th>Difference Average</th> </tr> <tr> <td>5</td> <td>20</td> <td>120</td> </tr> <tr> <td>3</td> <td>3</td> <td>30</td> </tr> <tr> <td>52</td> <td>1</td> <td>123</td> </tr> </table>

我有一個json數據，我想根據net的Key值過濾這些數據。 在這里，我想檢查 net 的每個值，例如，如果 net == 5 的值，那么如果 net = 5 存在超過 1，我將檢查 net 的每個值，然后我想為凈值創建一個新的 json 數據 = 5.我會為不同的凈值做這個。 下面是一個過濾 json 數據的凈值 = 3 和凈值 = 5 的示例。但我正在硬編碼這些值，我不會這樣做。

 var A =[ {"net":"5","differences":"-100"}, {"net":"5","differences":"23"}, {"net":"5","differences":"22"}, {"net":"52","differences":"123"}, {"net":"3","differences":"34"}, {"net":"5","differences":"54"}, {"net":"5","differences":"45"}, {"net":"3","differences":"54"}, {"net":"5","differences":"88"}, {"net":"5","differences":"0"}, {"net":"5","differences":"0"}, {"net":"5","differences":"0"}, {"net":"5","differences":"0"}, {"net":"5","differences":"0"}, {"net":"5","differences":"0"}, {"net":"5","differences":"1"}, {"net":"3","differences":"0"}, {"net":"5","differences":"0"}, {"net":"5","differences":"4"}, {"net":"5","differences":"0"}, {"net":"5","differences":"8"}, {"net":"5","differences":"0"}, {"net":"5","differences":"0"}, {"net":"5","differences":"0"} ] var result = A.filter(function(item){ return item.net == "3"; }); var results = A.filter(function(item){ return item.net == "5"; }); console.info(result); console.info(results);

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

Answer 1

創建一個 Map ，該 Map 將使用net作為鍵，並使用組合數據作為值的對象。

可以使用多種循環方式來更新地圖，我選擇的是reduce()；

然后遍歷 Map 以創建表格行和單元格

 const combined = A.reduce((m, {net, differences}) =>{ let obj = m.get(net) || {count : 0, diff : 0} obj.count ++; obj.diff += Number(differences) return m.set(net, obj) }, new Map); const table = document.querySelector('table') combined.forEach(({count, diff},net) =>{ let tr = table.insertRow(); let avg = (diff/count).toFixed(2); [net, count, diff, avg].forEach((v,i)=> { let cell = tr.insertCell(); cell.textContent = v; }); });

 <script> var A=[{net:"5",differences:"-100"},{net:"5",differences:"23"},{net:"5",differences:"22"},{net:"52",differences:"123"},{net:"3",differences:"34"},{net:"5",differences:"54"},{net:"5",differences:"45"},{net:"3",differences:"54"},{net:"5",differences:"88"},{net:"5",differences:"0"},{net:"5",differences:"0"},{net:"5",differences:"0"},{net:"5",differences:"0"},{net:"5",differences:"0"},{net:"5",differences:"0"},{net:"5",differences:"1"},{net:"3",differences:"0"},{net:"5",differences:"0"},{net:"5",differences:"4"},{net:"5",differences:"0"},{net:"5",differences:"8"},{net:"5",differences:"0"},{net:"5",differences:"0"},{net:"5",differences:"0"}]; </script> <table> <tr> <th>Net Weight</th> <th>Net Weight Count</th> <th>Difference Average</th> </tr> </table>

Answer 2

如果你不想硬編碼過濾值，你可以把它作為一個函數的參數，將返回過濾結果

const filterByNet = (netValue, arr) => 
  arr.filter(({ net }) => net === netValue)