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

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>

I have a json data in which i want to filter these data according to the Key value of net. 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. 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.

 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

Create a Map that would use the net value as keys and an object with the combined data as value.

You can use a variety of loop approaches to update the map, I chose reduce();

Then iterate over the Map to create the table rows and cells

 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

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)