Question posted in
You can find the official documentation here.

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

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

2

Answers


  1. 0

    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)
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search