Filter and select JavaScript objects based on the content of an array

Question

Filter and select JavaScript objects based on the content of an array

I have a challenge filtering specific fields from a set of JavaScript objects:

   A= [{
      asset_bubble: 17,
      biodiversity_loss: 15,
      code: "CH",
      critical_information: 14,
      cyber_attacks: 19,
      data_fraud: 13,
      deflation: 4,
      energy: 18,
      extreme_weather: 12,
      change_adaptation: 9,
      infrastructure: 33
   },
   {
     asset_bubble: 4,
     biodiversity_loss: 7,
     code: "TZ"
     critical_information: 9,
     cyber_attacks: 9,
     data_fraud: 10,
     deflation: 3,
     energy: 1,
     extreme_weather: 2,
     change_adaptation: 7
     infrastructure: 3
}]

The goal is to filter out these fields using the following array:

array=["data_fraud","change_adaptation", "deflation","code"]

The desired result should be:

B= [{     code: "CH",
          data_fraud: 13,
          deflation: 4,
          change_adaptation: 9
       },
       {
         code: "TZ"
         data_fraud: 10,
         deflation: 3,
         change_adaptation: 7
    }]

My attempt involved using the map function as follows:

B = A.map(({ ...array }) => ({ ...array }))

However, this approach did not yield the expected output. I am aware that the map method should work but how can I correctly specify the fields to be filtered from the objects?

javascript arrays json

Answer 1

Answer №1

When inside the callback of Array.map, it is possible to map the values of the array variable to a pair of [key, item[key]]. By utilizing this 2d array, an object can be generated using Object.fromEntries in the following manner.

const A = [{
  asset_bubble: 17,
  biodiversity_loss: 15,
  code: "CH",
  critical_information: 14,
  cyber_attacks: 19,
  data_fraud: 13,
  deflation: 4,
  energy: 18,
  extreme_weather: 12,
  change_adaptation: 9,
  infrastructure: 33
}, {
  asset_bubble: 4,
  biodiversity_loss: 7,
  code: "TZ",
  critical_information: 9,
  cyber_attacks: 9,
  data_fraud: 10,
  deflation: 3,
  energy: 1,
  extreme_weather: 2,
  change_adaptation: 7,
  infrastructure: 3
}];

const array = ["data_fraud","change_adaptation", "deflation","code"];

const B = A.map((item) => (
  Object.fromEntries(array.map((key) => ([key, item[key]])))
));
console.log(B);

Answer 2

When inside the callback of Array.map, it is possible to map the values of the array variable to a pair of [key, item[key]]. By utilizing this 2d array, an object can be generated using Object.fromEntries in the following manner.

const A = [{
  asset_bubble: 17,
  biodiversity_loss: 15,
  code: "CH",
  critical_information: 14,
  cyber_attacks: 19,
  data_fraud: 13,
  deflation: 4,
  energy: 18,
  extreme_weather: 12,
  change_adaptation: 9,
  infrastructure: 33
}, {
  asset_bubble: 4,
  biodiversity_loss: 7,
  code: "TZ",
  critical_information: 9,
  cyber_attacks: 9,
  data_fraud: 10,
  deflation: 3,
  energy: 1,
  extreme_weather: 2,
  change_adaptation: 7,
  infrastructure: 3
}];

const array = ["data_fraud","change_adaptation", "deflation","code"];

const B = A.map((item) => (
  Object.fromEntries(array.map((key) => ([key, item[key]])))
));
console.log(B);

Answer 3

Answer №2

Presenting an alternative method leveraging the reduce function:

const C= [ {
      asset_bubble: 15,
      biodiversity_loss: 12,
      code: "JP",
      critical_information: 10,
      cyber_attacks: 13,
      data_fraud: 11,
      deflation: 3,
      energy: 16,
      extreme_weather: 9,
      change_adaptation: 7,
      infrastructure: 30
   },
   {
     asset_bubble: 6,
     biodiversity_loss: 9,
     code: "BR",
     critical_information: 8,
     cyber_attacks: 7,
     data_fraud: 8,
     deflation: 2,
     energy: 4,
     extreme_weather: 1,
     change_adaptation: 5,
     infrastructure: 5
}];

const array=["critical_information","deflation", "extreme_weather","code"];

const D = C.map(item => array.reduce((acc, key) => ({ ...acc, [key]: item[key]}), {}));

console.log(D);

Answer 4

Presenting an alternative method leveraging the reduce function:

const C= [ {
      asset_bubble: 15,
      biodiversity_loss: 12,
      code: "JP",
      critical_information: 10,
      cyber_attacks: 13,
      data_fraud: 11,
      deflation: 3,
      energy: 16,
      extreme_weather: 9,
      change_adaptation: 7,
      infrastructure: 30
   },
   {
     asset_bubble: 6,
     biodiversity_loss: 9,
     code: "BR",
     critical_information: 8,
     cyber_attacks: 7,
     data_fraud: 8,
     deflation: 2,
     energy: 4,
     extreme_weather: 1,
     change_adaptation: 5,
     infrastructure: 5
}];

const array=["critical_information","deflation", "extreme_weather","code"];

const D = C.map(item => array.reduce((acc, key) => ({ ...acc, [key]: item[key]}), {}));

console.log(D);

Answer 5

Answer №3

NewArray = OriginalArray.map(({ property1, property2, property3, property4 }) => ({ property1, property2, property3, property4 }))

My suggestion would be to try this code snippet.

Answer 6

NewArray = OriginalArray.map(({ property1, property2, property3, property4 }) => ({ property1, property2, property3, property4 }))

My suggestion would be to try this code snippet.

Answer 7

Answer №4

After reading Derek's response, I decided to create a useful function for filtering objects based on their keys:

function filterByKeys ( target, keyArr ) {
  return Object.fromEntries(
    Object.entries(target).filter(
      ([key,value]) => keyArr.includes(key)
    )
  )
}

Here is an example of how to use this function:

function filterBykeys ( target, keyList ) {
  return Object.fromEntries(
    Object.entries(target).filter(
      ([key,value]) => keyList.includes(key)
    )
  )
}

const data= [{
      asset_bubble: 17,
      biodiversity_loss: 15,
      code: "CH",
      critical_information: 14,
      cyber_attacks: 19,
      data_fraud: 13,
      deflation: 4,
      energy: 18,
      extreme_weather: 12,
      change_adaptation: 9,
      infrastructure: 33
   },
   {
     asset_bubble: 4,
     biodiversity_loss: 7,
     code: "TZ",
     critical_information: 9,
     cyber_attacks: 9,
     data_fraud: 10,
     deflation: 3,
     energy: 1,
     extreme_weather: 2,
     change_adaptation: 7,
     infrastructure: 3
}];

const arrays=["data_fraud","change_adaptation", "deflation","code"];

const result = data.map( obj => {
  return filterBykeys(obj, arrays);
});

console.log(result)

Answer 8

After reading Derek's response, I decided to create a useful function for filtering objects based on their keys:

function filterByKeys ( target, keyArr ) {
  return Object.fromEntries(
    Object.entries(target).filter(
      ([key,value]) => keyArr.includes(key)
    )
  )
}

Here is an example of how to use this function:

function filterBykeys ( target, keyList ) {
  return Object.fromEntries(
    Object.entries(target).filter(
      ([key,value]) => keyList.includes(key)
    )
  )
}

const data= [{
      asset_bubble: 17,
      biodiversity_loss: 15,
      code: "CH",
      critical_information: 14,
      cyber_attacks: 19,
      data_fraud: 13,
      deflation: 4,
      energy: 18,
      extreme_weather: 12,
      change_adaptation: 9,
      infrastructure: 33
   },
   {
     asset_bubble: 4,
     biodiversity_loss: 7,
     code: "TZ",
     critical_information: 9,
     cyber_attacks: 9,
     data_fraud: 10,
     deflation: 3,
     energy: 1,
     extreme_weather: 2,
     change_adaptation: 7,
     infrastructure: 3
}];

const arrays=["data_fraud","change_adaptation", "deflation","code"];

const result = data.map( obj => {
  return filterBykeys(obj, arrays);
});

console.log(result)

Filter and select JavaScript objects based on the content of an array

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to set up perl-JSON on CentOS?

Is it possible to alter the page color using radio buttons and Vue.js?

Issue with MIME handling while utilizing Vue-Router in combination with Express

Every time I restart the server with MEN stack, I encounter an error message stating "Cannot read property 'name' of null"

Create a three-dimensional tree array in Typescript/Javascript by transforming a flat array

Tips for eliminating the trailing slash from the end of a website article's URL

Removing an item from a parent array within a Vue.js component using Vue.js 2

Calculate the total of items in an array based on a different regular item in the same row using PHP

Populate dropdown list dynamically in Codeigniter using AJAX and jQuery

Getting a specific value from a REST API array in JavaScript: Tips and tricks

Utilizing jQuery for cloning elements

Why are imported modules unable to reach global variables in Node?

Utilizing d3.csv to load CSV data into an nvd3 multiBar Chart demonstration (in JSON format)

What is the best way to declare a variable within a VueJS v-if condition without it being visible?

Utilize JavaScript to target the specific CSS class

Implement Cross-Origin Resource Sharing in Angular frontend

What is the most effective method to extract an ID from a URL that is written in various formats?

CSS: elements that are only visible when positioned above specific elements

When you try to remove an element from an array by its index in Vue JS, the outcome may not be

creating an audio streaming application using child processes in nodejs