Convert array of objects to object of key-value pairs

Question

This is probably a 2 liner, but for some reason I have hit a wall.

I'd like to convert an array of objects to an object of key-value pairs.

So this:

var items = [
    {
      name: 'hello',
      value: ['one', 'two']
    },
    {
      name: 'hi',
      value: ['one', 'two', 'three']
    }
]

to this:

var items = {
    'hello': ['one', 'two'],
    'hi': ['one', 'two', 'three']
}

Is this really the most elegant way?

const newObj = {};
items.forEach((item) => {
  newObj[item.name] = item.value;
});

I'd like to use ES6 arrow functions preferably. Also, can someone tell me if you think it would be easier to manipulate this data in the first or second format? For context, I am trying to teach myself topological sorts.

One could also do `Object.fromEntries(items.map(({ name, value }) => [name, value]))` ... but if that's more elegant, I dunno. — Jonas Wilms, Apr 18 '20 at 22:18

Yevgen Gorbunkov · Accepted Answer · 2020-04-18T22:52:35.777

6

I would do that with Array.prototype.reduce(), it is even more concise and certainly faster than Object.fromEntries():

const items = [{name:'hello',value:['one','two']},{name:'hi',value:['one','two','three']}], 

result = items.reduce((r,{name,value}) => (r[name]=value,r), {})

console.log(result)

.as-console-wrapper{min-height:100%;}

edited Apr 18 '20 at 22:52

answered Apr 18 '20 at 22:41

Yevgen Gorbunkov

14,071
3
15
36

score 5 · Answer 2 · answered Apr 18 '20 at 22:17

5

A more concise method would be to use Object.fromEntries:

var items = [
    {
      name: 'hello',
      value: ['one', 'two']
    },
    {
      name: 'hi',
      value: ['one', 'two', 'three']
    }
];
const newObj = Object.fromEntries(
  items.map(({ name, value }) => [name, value])
);
console.log(newObj);

answered Apr 18 '20 at 22:17

CertainPerformance

313,535
40
245
254

@bspckl : if you plan to handle with this some large datasets and you require *certain performance*, there're even more concise and [**fast**](https://jsbench.me/tck967ysqe/1) options around ;) – Yevgen Gorbunkov Apr 18 '20 at 22:57

score 0 · Answer 3 · answered Apr 18 '20 at 22:57

I don't know if this is more elegant but I think reduce make sence here.

var items = [
    {
      name: 'hello',
      value: ['one', 'two']
    },
    {
      name: 'hi',
      value: ['one', 'two', 'three']
    }
];


const newObj = items.reduce((c, {value, name}) => {
  c[name] = value;
  return c;
}, {});

console.log(newObj);

OO7 · Answer 4 · 2020-04-20T19:53:44.380

0

Simply by mapping each array elements:

use map() method:

const newObj = {};
items.map( ( { name, value } ) => {
    newObj[name] = value;
});

EDIT:

use forEach() method:

const newObj =
((obj) => {
    items.forEach(({ name, value }) => { obj [name] = value });
    return obj;
 })({});

JavaScript: Difference between .forEach() and .map()

edited Apr 20 '20 at 19:53

answered Apr 19 '20 at 00:25

OO7

640
3
9

That is somewhat unconventional use of `map()` method, since it is expected to return array of the same size as input, so, considering you simply use it for looping and do necessary actions (assign `newObj` properties) alongside, you'd be way better off with `Array.prototype.forEach()` – Yevgen Gorbunkov Apr 19 '20 at 21:52
Really? So what's the different between map() method vs forEach() method? – OO7 Apr 20 '20 at 17:11

score 0 · Answer 5 · answered Apr 19 '20 at 06:53

0

Use Object.values and Object.fromEntries to simplify into one line

Object.fromEntries(items.map(item => Object.values(item)))

var items = [
  {
    name: "hello",
    value: ["one", "two"]
  },
  {
    name: "hi",
    value: ["one", "two", "three"]
  }
];

const res = Object.fromEntries(items.map(item => Object.values(item)));

console.log(res);

answered Apr 19 '20 at 06:53

Siva K V

9,737
2
13
29

If you were targeting for ultimate conciseness, you could've done `Object.fromEntries(items.map(Object.values))` or, doing code golf all the way through, `with(Object)fromEntries(arr.map(values))`. – Yevgen Gorbunkov Dec 13 '21 at 12:50

Convert array of objects to object of key-value pairs

5 Answers5

Linked