How to get a subset of objects in an array passing an array as an argument

Question

I am receiving an array of objects as response data from an API call.

data = [{obj1},{obj2},{obj3},{obj4},{obj5}]

obj1 = {
  prop1: 'value1',
  prop2: 'value2',
  prop3: 'value3',
}

I am trying to use an array, let's say: ['prop2', 'prop3'] to filter the array of objects and return an array of a subset of objects.

[{filteredObj1},{filteredObj2},{filteredObj3},{filteredObj4},{filteredObj5}]

filteredObj1 = {
  prop2: 'value2',
  prop3: 'value3'
}

And so on...

In have tried the following approach initially:

const arrayOfPropsIWant = ['prop1', 'prop2']

data.forEach((el) => {
  const filtered = (({ ...arrayOfPropsIWant }) => ({ ...arrayOfPropsIWant }))(el);
})

This worked when instead of passing the ...arrayOfPropsIWant to destructure I passed the props explicitly (({ prop1, prop2 })

I am trying to build a custom ReactJS hook, is there a way I can achieve this?

Alexandre Senges · Accepted Answer · 2020-03-21 17:42:58Z

1

You should use Array.map:

const data = [
 { prop1: 'value1', prop2: 'value2', prop3: 'value3' },
 { prop1: 'value1', prop2: 'value2', prop3: 'value3'},
 { prop1: 'value1', prop2: 'value2', prop3: 'value3'}
]

const arrayOfPropsIWant = ['prop1', 'prop2']

const filtered = data.map((elem) => {
    const out = {};
    arrayOfPropsIWant.forEach(prop => out[prop] = elem[prop]);
    return out;
   }
);

console.log(filtered);

answered Mar 21, 2020 at 17:42

Alexandre Senges

1,6091 gold badge15 silver badges23 bronze badges

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

Comments

Ghoul Ahmed · Accepted Answer · 2020-03-21 17:39:01Z

1

try with map

const data = [
 { prop1: 'value1', prop2: 'value2', prop3: 'value3' },
 { prop1: 'value1', prop2: 'value2', prop3: 'value3'},
 { prop1: 'value1', prop2: 'value2', prop3: 'value3'}
]

const result = data.map(({prop2, prop3})=>({prop2, prop3}))

console.log(result);

answered Mar 21, 2020 at 17:39

Ghoul Ahmed

4,8342 gold badges17 silver badges25 bronze badges

1 Comment

Alexandre Senges Over a year ago

You cant edit the prop names with a string array in that example

Anurodh Singh · Accepted Answer · 2020-03-21 17:45:02Z

1

Try this,

const data = [
 { prop1: 'value1', prop2: 'value2', prop3: 'value3' },
 { prop1: 'value1', prop2: 'value2', prop3: 'value3'},
 { prop1: 'value1', prop2: 'value2', prop3: 'value3'}
];

const props=['prop1','prop2']

const result = data.map((item)=>{
  Object.keys(item).map((key)=>{
    if(!props.includes(key))
      delete item[key];
  })
  return item;
})

console.log(result);

answered Mar 21, 2020 at 17:45

Anurodh Singh

8106 silver badges9 bronze badges

1 Comment

Alexandre Senges Over a year ago

The delete fully deletes the object attribute, what if you need them later? You should do a copy of the object first.

HMR · Accepted Answer · 2020-03-21 17:54:25Z

1

You could try this:

const data = [
  { name: 'aaa', age: 10, id: 1 },
  { name: 'aab', age: 20, id: 2 },
];

const map = array => keys =>
  array.map(
    /** you should use 
    Object.fromEntries(
      Object.entries(item).filter(([key])=>keys.includes(key))
    )
    but beause Stack Overflow has not updated babel since years
    this will not work on SO code snippet
    **/
    item =>
      keys.reduce((result, key) => {
        result[key] = item[key];
        return result;
      }, {})
  );
const mapData = map(data);
console.log('id and name', mapData(['id', 'name']));
console.log('id and age', mapData(['id', 'age']));

edited Mar 21, 2020 at 17:54

answered Mar 21, 2020 at 17:46

HMR

39.5k26 gold badges99 silver badges175 bronze badges

Collectives™ on Stack Overflow

How to get a subset of objects in an array passing an array as an argument

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related