Отображение константы JSON в React.js

Question

У меня есть куча конфигураций в const в моем приложении React.js, и JSON выглядит следующим образом:

const original = [
  { 'id': '1', 'desc': 'AAA', 'isOK': true },
  { 'id': '2', 'desc': 'BBB', 'isOK': true },
  { 'id': '3', 'desc': 'CCC', 'isOK': false },
  ...
];

Он содержит кучу конфигураций, которые я, скорее всего, добавлю вгде-то отдельный файл, но сейчас я хотел проверить его и подумал, что const будет уместным.

Я пытаюсь использовать компонент ReactiveSearch и передать его на MultiDataList data поле , для которого оно должно быть преобразовано в:

[
  { label: '1', value: 'AAA' },
  { label: '2', value: 'BBB' },
  { value: '3', value: 'CCC' },
  ...
]

Я предполагал, что original.map(e => { 'label': e.id, 'value': e.desc }) выполнит трюк, но я получаю этот «Неожиданный токен»на первом двоеточии.IntelliJ говорит: «Выражение выражения не является присваиванием или вызовом».

Отображение массива с отдельными элементами работает просто отлично, например, original.map(e => e.id), поэтому я не совсем уверен, что делаю неправильно.Я только начал возиться с JavaScript и React.js.

Answer 1

Да, вы немного ошиблись.

const original = [
 { 'id': '1', 'desc': 'AAA', 'isOK': true },
 { 'id': '2', 'desc': 'BBB', 'isOK': true },
 { 'id': '3', 'desc': 'CCC', 'isOK': false },
 ...
];

В синтаксисе ES5 это выглядит так:

original.map(config=>({label:config.id,value:config.desc}))

Также обратите внимание на парантез вокруг возвращающегося объекта. Это необходимо.

Вы также можете сделать это следующим образом.

original.map(function(config){
   return {
      label:config.id,
      value:config.desc
   }
})

Answer 2

Чтобы неявно вернуть объект из функции стрелки, вам необходимо заключить скобки { и } в круглые скобки, иначе интерпретатор не знает, как отличить его от обычного функционального блока, начинающегося с{:

const original = [
  { 'id': '1', 'desc': 'AAA', 'isOK': true },
  { 'id': '2', 'desc': 'BBB', 'isOK': true },
  { 'id': '3', 'desc': 'CCC', 'isOK': false },
];

console.log(
  original.map(e => ({ label: e.id, value: e.desc }))
);

Обратите внимание, что нет необходимости помещать кавычки вокруг свойств объекта (которые по умолчанию считаются строками) - должна быть только строка значения заключены в разделители строк.

Другой метод, использующий деструктуризацию:

const original = [
  { 'id': '1', 'desc': 'AAA', 'isOK': true },
  { 'id': '2', 'desc': 'BBB', 'isOK': true },
  { 'id': '3', 'desc': 'CCC', 'isOK': false },
];

console.log(
  original.map(({ id, desc }) => ({ label: id, value: desc }))
  // or:
  // original.map(({ id: label, desc: value }) => ({ label, value }))
);