Pull only certain properties from each object in an array, and add to new array

Question

Attempting to learn javascript. I am trying to create Table Row data from data in state (being sent to components via Context API):

myArr = [
   {id: 1, name: AA, desc: DescA, color: red},
   {id: 2, name: BB, desc: DescB, color: orange},
   {id: 3, name: CC, desc: DescC, color: green},
   {id: 4, name: DD, desc: DescD, color: blue},
]

I would like to pull only name and color from each object, and create a new arr of objects.

newArr = [
   {name: AA, color: red}
   {name: BB, color: orange}
   {name: CC, color: green}
   {name: DD, color: blue}
]

I would like to do this to match my table data to table headers:

const headCells = [
    { id: 'name', numeric: false, disablePadding: true, label: 'Name' },
    { id: 'color', numeric: false, disablePadding: false, label: 'Color' },
];

I have tried .map and Array.prototype.forEach(), but I am using them incorrectly:

var newArray = activities.map(function(item) {return item["name", "color"]; })

Apologies for this almost certainly being a duplicate. Any help would be really appreciated. Thanks!

.map is the right approach, your syntax is just slightly wrong. return { name: item.name, color: item.color } — tymeJV
– tymeJV, Commented Oct 10, 2019 at 14:55

Jérémie L · Accepted Answer · 2019-10-10 14:58:25Z

3

You can use Array.prototype.map to create a new array:

const newArray = myArray.map(item => ({ name: item.name, color: item.color }));

Or, with destructuring assignement (ES6):

const newArray = myArray.map(({ item, color }) => ({ item, color }));

answered Oct 10, 2019 at 14:58

Jérémie L

7934 silver badges14 bronze badges

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

Comments

Nina Scholz · Accepted Answer · 2019-10-10 14:59:11Z

If you like to get the id from headCells, you could get the keys in advance and map the properties.

var data = [{ id: 1, name: 'AA', desc: 'DescA', color: 'red' }, { id: 2, name: 'BB', desc: 'DescB', color: 'orange' }, { id: 3, name: 'CC', desc: 'DescC', color: 'green' }, { id: 4, name: 'DD', desc: 'DescD', color: 'blue' }],
    headCells = [{ id: 'name', numeric: false, disablePadding: true, label: 'Name' }, { id: 'color', numeric: false, disablePadding: false, label: 'Description' }],
    keys = headCells.map(({ id }) => id),
    result = data.map(o => Object.assign({}, ...keys.map(k => ({ [k]: o[k] }))));

console.log(result);

Approach with newer Object.fromEntries

var data = [{ id: 1, name: 'AA', desc: 'DescA', color: 'red' }, { id: 2, name: 'BB', desc: 'DescB', color: 'orange' }, { id: 3, name: 'CC', desc: 'DescC', color: 'green' }, { id: 4, name: 'DD', desc: 'DescD', color: 'blue' }],
    headCells = [{ id: 'name', numeric: false, disablePadding: true, label: 'Name' }, { id: 'color', numeric: false, disablePadding: false, label: 'Description' }],
    keys = headCells.map(({ id }) => id),
    result = data.map(o => Object.fromEntries(keys.map(k => [k, o[k]])));

console.log(result);

Collectives™ on Stack Overflow

Pull only certain properties from each object in an array, and add to new array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related