Utilize the keys in a separate array to filter a JSON response based on their values

Question

Utilize the keys in a separate array to filter a JSON response based on their values

I am attempting to extract values from a JSON response by using key values stored in a separate array. However, when I try to log the results, I am only getting 'undefined'. Here is my code:

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

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

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

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

javascript arrays json vue.js

Answer 1

Answer №1

If you wish to map based on fieldName, you will require 2 loops for rendering the outcome.

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

let dataValues = [{
  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 storedData = dataValues.map((e) => fieldName.map(key => e[key]));

console.log(storedData);

This will result in the table:

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

You can also render without mapping, which requires only one loop but listing all fields individually. For example:

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

Answer 2

If you wish to map based on fieldName, you will require 2 loops for rendering the outcome.

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

let dataValues = [{
  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 storedData = dataValues.map((e) => fieldName.map(key => e[key]));

console.log(storedData);

This will result in the table:

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

You can also render without mapping, which requires only one loop but listing all fields individually. For example:

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

Utilize the keys in a separate array to filter a JSON response based on their values

Answer №1

Similar questions

perform an action if any division element is void of content

Posts that are repeated when making an AJAX call in WordPress

Converting JSON to Custom Object in Android using Jackson during Spring_MAPPING

ReactForms Deprication for NgModel

HTTP request in Angular with specific body content and custom headers

Tips for efficiently utilizing a JSON file in Robot Framework: How to read the JSON data once and reuse it multiple times within the same robot file

Sorting and searching through multiple values using data structures in Rails

How can I combine addClass with fadeIn/fadeOut in JavaScript?

Displaying Laravel's validation errors within the Ajax success event

Having problems uploading and resizing images using Express.js

In what scenarios would you choose to use "class" instead of "id"?

Tips for implementing a Dialog Box within a Card Action Button Group

Using the JQuery post method along with the name attribute

What are some ways to display unprocessed image data on a website using JavaScript?

The animation in threejs using lerp and camera transitions lacks fluidity

Difficulty in dynamically updating custom attributes data in a popover

Update Jquery Dialog's Button After Making an Ajax Request

The nested ng-repeat on angular seems to be malfunctioning

The retrieval of JSON data in a JavaScript function is malfunctioning

The Bootstrap carousel feature allows you to track the duration each image is displayed