Извлекать только определенные свойства из каждого объекта в массиве и добавлять в новый массив - PullRequest
Новая
       44

Извлекать только определенные свойства из каждого объекта в массиве и добавлять в новый массив

0 голосов
/ 10 октября 2019

Попытка выучить JavaScript. Я пытаюсь создать данные таблицы строк из данных в состоянии (отправляемых компонентам через 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},
]

Я хотел бы получить только имя и цвет из каждого объекта и создать новый массив изобъекты. 

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

Я хотел бы сделать это, чтобы сопоставить данные моей таблицы с заголовками таблицы: 

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

Я пробовал .map и Array.prototype.forEach(), но я используюих неправильно: 

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

Извиняюсь за то, что это почти наверняка дубликат. Любая помощь могла бы быть полезна. Спасибо!

Ответы [ 2 ]

3 голосов
/ 10 октября 2019

Вы можете использовать Array.prototype.map для создания нового массива: 

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

Или с назначением деструктурирования (ES6): 

const newArray = myArray.map(({ item, color }) => ({ item, color }));
1 голос
/ 10 октября 2019

Если вы хотите получить id из headCells, вы можете получить ключи заранее и сопоставить свойства. 

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);

Подход с более новыми 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);
...