简体   繁体   English

如何过滤不同键值的 json 数据并使用该键值创建新的 json 元素而无需硬编码数据

[英]how to filter json data for different key value and creating a new json element using that key values without hard coding data

 <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>

I have a json data in which i want to filter these data according to the Key value of net.我有一个json数据,我想根据net的Key值过滤这些数据。 here i want to check each and every value for net for example if the value for net == 5 then i will check each value of net if net = 5 exist more then 1's then i want to create a new json data for net value = 5. i will do this for different value of net.在这里,我想检查 net 的每个值,例如,如果 net == 5 的值,那么如果 net = 5 存在超过 1,我将检查 net 的每个值,然后我想为净值创建一个新的 json 数据 = 5.我会为不同的净值做这个。 below is an example which filters the json data for a net value = 3 and net = 5. but i am hard coding these value which i dont wont.下面是一个过滤 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>

Create a Map that would use the net value as keys and an object with the combined data as value.创建一个 Map ,该 Map 将使用net作为键,并使用组合数据作为值的对象。

You can use a variety of loop approaches to update the map, I chose reduce();可以使用多种循环方式来更新地图,我选择的是reduce();

Then iterate over the Map to create the table rows and cells然后遍历 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>

If you want to not hardcode filtered value, you can make it a parameter of a function, the will return filtered results如果你不想硬编码过滤值,你可以把它作为一个函数的参数,将返回过滤结果

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM