Filter json response using values from another array containing keys

Question

I am trying to get the values from a JSON response, using key values contained in a different array. My code is as below but I am getting undefined when I try to log the results.

let fdName =["SerialNo","denDate","denShift","denTime","denWs_1","denWs_2","denVol_1","denVol_2","denPwdrMix"];

let dtValue = [{
id: 1,
SerialNo: 1,
denDate: "2019-09-09",
denShift: "Day",
denTime: "10:32:00",
denWs_1: 10.23,
denWs_2: 11.2,
denVol_1: 12.5,
denVol_2: 10.12,
denPwdrMix: 0.75,
created_at: null,
updated_at: null
}];

var savedData = fdName.map(function(e) {
    var filteredRes = dtValue.find(a => a[key] == e);
return filteredRes ;});

console.log(savedData);

expected results: [1, 2019-09-09, Day, 10:32:00, 10:23, 11.2, 12.5, 10.12, 0.75];

I would like to display the obtained results in a table using v-for as below

<tbody>
 <tr>
  <td
    v-for="(dtValue, sdtValue ) in savedData "
     :key="sdtValue"
      >     
       {{dtValue}}
 </td>
  </tr>
 </tbody>

Why dtValue need to be an array? And also what is key in dtValue.find(a => a[key] == e);? — Cuong Le Ngoc
– Cuong Le Ngoc, Commented Sep 9, 2019 at 10:12
@CuongLeNgoc, I was trying to pass a key-value to equate to the mapped value from fdName array. A bit of guidance on how best to achieve this will be much appreciated. — Frank Mochoge
– Frank Mochoge, Commented Sep 9, 2019 at 10:18
What is the expected output if dtValue has more than one elements? — Cuong Le Ngoc
– Cuong Le Ngoc, Commented Sep 9, 2019 at 10:20
My initial intent was to loop through the values and display them directly in the DOM, that way I will directly bind the values to the matching key, But unfortunately, when doing that I was getting a column instead of a rows. My implementation was <td v-for="(dtValue, sdtValue ) in savedFormValues" :key="sdtValue" > <div v-for="(th_title, dth_title) in tbData" :key="dth_title"> {{dtValue[th_title]}} </div></td> — Frank Mochoge
– Frank Mochoge, Commented Sep 9, 2019 at 10:29
This way I had control of multiple elements. But based on your comment I think its best if the returned array is nested that way, I can loop through. — Frank Mochoge
– Frank Mochoge, Commented Sep 9, 2019 at 10:34

Cuong Le Ngoc · Accepted Answer · 2019-09-09 10:50:11Z

1

If you want to map based on fdName, you will need 2 loop to render the result.

let fdName =["SerialNo","denDate","denShift","denTime","denWs_1","denWs_2","denVol_1","denVol_2","denPwdrMix"];

let dtValue = [{
  id: 1,
  SerialNo: 1,
  denDate: "2019-09-09",
  denShift: "Day",
  denTime: "10:32:00",
  denWs_1: 10.23,
  denWs_2: 11.2,
  denVol_1: 12.5,
  denVol_2: 10.12,
  denPwdrMix: 0.75,
  created_at: null,
  updated_at: null
}];

var savedData = dtValue.map((e) => fdName.map(key => e[key]));

console.log(savedData);

Then the table will be:

<tbody>
  <tr v-for="data in savedData">
    <td v-for="value in data">     
      {{value}}
    </td>
  </tr>
</tbody>

Of you can render without map then need only one loop but need to list all the field. Example:

<tbody>
  <tr v-for="data in dtValue">
    <td>{{data[key1]}}</td>
    <td>{{data[key2]}}</td>
    <td>{{data[key3]}}</td>
    <td>{{data[key4]}}</td>
    <td>{{data[key5]}}</td>
  </tr>
</tbody>

answered Sep 9, 2019 at 10:50

Cuong Le Ngoc

12k2 gold badges23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Frank Mochoge Over a year ago

Thanks @Cuong I have used this <tbody> <tr v-for="data in savedData"> <td v-for="value in data"> {{value}} </td> </tr> </tbody> approach. It working well.

Frank Mochoge Over a year ago

After doing the computation.

Collectives™ on Stack Overflow

Filter json response using values from another array containing keys

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related