JavaScript: Dynamically generated object key

Question

const cars = [
  {
    'id': 'truck',
    'defaultCategory': 'vehicle'
  }
]

const output = []

Object.keys(cars).map((car) => {
  output.push({
      foo: cars[car].defaultCategory
  })
})

console.log(output)

This work fine, however what I want to achieve is so that the newly crated object has structure of 'truck': 'vehicle'.

So if I replace push argument with

${cars[car].id}`: cars[car].defaultCategory

I get SyntaxError: Unexpected template string

What am I doing wrong?

`cars` is an array. Why use `Object.keys` on it? Just call `map` directly. — ibrahim mahrir, Dec 06 '17 at 15:01
You want `output` to be a plain object (`{}`), not an array. — Bergi, Dec 06 '17 at 15:02
How is the output supposed to be structured when there are multiple cars? — Bergi, Dec 06 '17 at 15:03

Ori Drori · Accepted Answer · 2017-12-06T15:19:25.090

7

Use map on the array, and not the keys (the indexes) to get an array of objects. For each object use computed property names to set the id value as the key:

const cars = [
  {
    'id': 'truck',
    'defaultCategory': 'vehicle'
  }
];

const result = cars.map(({ id, defaultCategory }) => ({ [id]: defaultCategory }));

console.log(result);

edited Dec 06 '17 at 15:19

answered Dec 06 '17 at 15:01

Ori Drori

183,571
29
224
209

score 1 · Answer 2 · answered Dec 06 '17 at 15:06

You should use .map() over your cars array and not Object.keys(cars):, we don't use Object.keys() with arrays.

This is how should be your code:

var output = cars.map(function(car) {
  return {
    [car.id]: car.defaultCategory
  };
});

var cars = [{
  'id': 'truck',
  'defaultCategory': 'vehicle'
}];


var output = cars.map(function(car) {
  return {
    [car.id]: car.defaultCategory
  };
});

console.log(output);

JavaScript: Dynamically generated object key

2 Answers2