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

The vacant array suddenly fills up with content once it is accessed

The TypeScript find() method on an array are showing an error message that says, "There is no overload that matches this call

Executing code within Vue js $set method's callback

Leveraging javascript to invoke a controller function within the MVC framework

React JS BlueprintJS Date Range Picker not functioning as expected

The process of computing and graphing an array based on a specific field

Is there a way to retrieve the chosen selection from a select dropdown element using JavaScript?

Passing intricate data structure from Angular to SignalR

Go through every item in the list and update each element of the array with the outcome, doing so concurrently

Deleting a specific row within a Material UI DataGrid in Reactjs: Tips and tricks

What is the best way to establish and maintain lasting connections with the Firebase database while utilizing the superagent

Which option would be more beneficial for crafting a responsive UI: integrating a UI framework with three.js or solely relying on vanilla

What is the best way to include and delete several images on a canvas?

Discovering the array item by its ID using Angular 2 with Typescript

Adjust the language of the submit and reset button text based on a variable

The 'Component' you are trying to use cannot be rendered as a JSX component in Next.js

Having difficulty accessing the sound file despite inputting the correct path. Attempts to open it using ./ , ../ , and ../../ were unsuccessful

Enhancing the validation of multiple selects using jQuery

Maximizing Input Field Utility in React JS

Saved as a list in serialized form, with only a single record stored