JavaScript: Как я могу изменить имена свойств объектов в массиве? - PullRequest
Новая
       4

JavaScript: Как я могу изменить имена свойств объектов в массиве?

0 голосов
/ 31 августа 2018

Я использую это react-select: https://github.com/JedWatson/react-select

Формат данных параметров, который им требуется: 

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry'},
    { value: 'vanilla', label: 'Vanilla' }
];

Мой массив настроен по-другому следующим образом: 

const columns = [
    { name: 'OrderNumber', title: 'Order Number' },
    { name: 'strawberry', title: 'Strawberry' },
    { name: 'vanilla', title: 'Vanilla' }
]

Я не могу изменить свой массив. Если попытаться использовать name или value в моих опциях, я столкнусь с проблемами при использовании их с select-react. Если я изменю свой name на value, параметры выбора будут заполнены, однако я не хочу этого делать.

Может ли кто-нибудь научить меня, как я могу изменить массив name на value?

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Если вы просто хотите переименовать свойство name в value, вы можете использовать map и уничтожить свойство name как value и выбрать остальные. 

const columns = [
    { name: 'OrderNumber', title: 'Order Number' },
    { name: 'strawberry', title: 'Strawberry' },
    { name: 'vanilla', title: 'Vanilla' }
];

const newColumns = columns.map( item => {
  const { name: value, ...rest } = item;
  return { value, ...rest }
 }
);

console.log( newColumns );

Но я подозреваю, что вы захотите этого, поскольку react-select не работает (насколько я вижу) с title. Я думаю, он ждет label проп. Если это так, перейдите и измените все свойства, как предложено @Dacre Denny. Мне нравятся функции стрелок :) Итак: 

const newColumns = columns.map( item =>
  ( { value: item.name, label: item.title } )
);
0 голосов
/ 31 августа 2018

Вы можете использовать функцию .map(), чтобы сделать данные в columns пригодными для использования с react-select.

Функция .map() доступна для типа Array. Он создает новый массив из массива, к которому вы его вызываете, и позволяет вам предоставить функцию, которая преобразует / изменяет каждый элемент по мере его копирования из исходного массива.

Вы можете использовать его следующим образом: 

const columns = [
    { name: 'OrderNumber', title: 'Order Number' },
    { name: 'strawberry', title: 'Strawberry' },
    { name: 'vanilla', title: 'Vanilla' }
]

const options = columns.map(function(row) {

   // This function defines the "mapping behaviour". name and title 
   // data from each "row" from your columns array is mapped to a 
   // corresponding item in the new "options" array

   return { value : row.name, label : row.title }
})

/*
options will now contain this:
[
    { value: 'OrderNumber', label: 'Order Number' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
];
*/

Для получения дополнительной информации см. Документацию MDN для .map()

.
...