如何过滤不同键值的 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)