I have a bunch of configurations in a const in my React.js app and the JSON looks like this:

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

It contains a bunch of configurations that I'll likely put in a separate file somewhere, but for now I wanted to test it and thought that a const would be appropriate.

I'm attempting to use the ReactiveSearch ponent and feed this to MultiDataList's data field for which it needs to be transformed into:

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

I had assumed that original.map(e => { 'label': e.id, 'value': e.desc }) would do the trick but I get that 'Unexpected token' at the first colon. IntelliJ says 'Expression statement is not assignment or call'.

Mapping through the array with individual items works just fine, e.g. original.map(e => e.id), so I am not quite sure what I'm doing wrong. I've only started tinkering with JavaScript and React.js.

I have a bunch of configurations in a const in my React.js app and the JSON looks like this:

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

It contains a bunch of configurations that I'll likely put in a separate file somewhere, but for now I wanted to test it and thought that a const would be appropriate.

I'm attempting to use the ReactiveSearch ponent and feed this to MultiDataList's data field for which it needs to be transformed into:

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

I had assumed that original.map(e => { 'label': e.id, 'value': e.desc }) would do the trick but I get that 'Unexpected token' at the first colon. IntelliJ says 'Expression statement is not assignment or call'.

Mapping through the array with individual items works just fine, e.g. original.map(e => e.id), so I am not quite sure what I'm doing wrong. I've only started tinkering with JavaScript and React.js.

• javascript
• reactjs
• jsx

2 Answers 2

In order to implicitly return an object from an arrow function, you need to surround the { and } brackets in parentheses, else the interpreter doesn't know how to differentiate it from an ordinary function block that starts with {:

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

Note that there's no need to put quotes around the object properties (which are assumed to be strings by default) - only string values need to be enclosed in string delimiters.

Another method, using destructuring:

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

Yes you got it slightly wrong.

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

In the ES5 syntax it look's like this:

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

Also notice the paranthesis around the returning object.It is necessary.

You can also do it like this.

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