Javascript: Convert a list of objects to an associative array

Question

I'm looking for a way to take an array of JavaScript objects and get an associative array of those objects keyed by some attribute.

For example, given this array of objects:

var data = [
  {'id': 100, name: 'bob', foo: 'bar'},
  {'id': 200, name: 'john', foo: 'qux'}
];

I want to be able to look up each object by its id, so I want an object like this:

var new_data = {
  100: {name: 'bob', foo: 'bar'}, 
  200: {name: 'john', foo: 'qux'}
}

// now I can use new_data[200] to access `john`

While I'm sure it's easy enough to construct a new object and then iterate over each object in the original array and append a new key:value pair to new object, I was wondering if there was a more concise way of doing it.

It doesn't get much more concise than that. There's no native functions that I know of to do this, but it's trivial to implement. — Alexander O'Mara
– Alexander O'Mara, Commented Mar 30, 2016 at 4:30
Thanks Alexandar, I'll write up my own helper. I wasn't sure if Javascript had something comparable to Python's dictionary comprehensions. I see Underscore.js has a function that does what I'd like called "indexBy" so presumably if they've implemented it in that library, there must not be something native. — Joseph
– Joseph, Commented Mar 30, 2016 at 4:32

score 6 · Accepted Answer · 2016-03-30 04:58:41Z

6

In ES6:

Object.assign({}, ...data.map(({id, name, foo}) => ({[id]: {name, foo}})))

This maps each object in the input into a single-property object with the id as key, then spreads those into parameters to Object.assign which will glue them together for you.

Or,

construct a new object and then iterate over each object in the original array and append a new key:value pair to new object

You can do essentially what you just said but in relatively concise form using reduce:

data.reduce((result, {id, name, foo}) => {
  result[id] = {name, foo};
  return result;
}, {})

edited Mar 30, 2016 at 4:58

answered Mar 30, 2016 at 4:33

user663031

Sign up to request clarification or add additional context in comments.

2 Comments

georg Over a year ago

I'd use Map for the ES6 version: new Map(data.map(x => [x.id, x]))

user663031 Over a year ago

@georg That's nicer.

Dhananjaya Kuppu · Accepted Answer · 2016-03-30 04:43:40Z

2

You may try this:

var data = [
   {'id': 100, name: 'bob', foo: 'bar'},
   {'id': 200, name: 'john', foo: 'qux'}
];

data.reduce(function(p, c){
  p[c.id] = {name:c.name, foo: c.foo};
  return p;
}, {});

answered Mar 30, 2016 at 4:43

Dhananjaya Kuppu

1,3329 silver badges10 bronze badges

Comments

NOBrien · Accepted Answer · 2016-03-30 04:37:49Z

0

Here is a solution using Array maps:

var data = [{
  'id': 100,
  name: 'bob',
  foo: 'bar'
}, {
  'id': 200,
  name: 'john',
  foo: 'qux'
}];

var new_data = {};
// Iterate over data
data.map(obj => {
  // Create new object from old
  new_data[obj.id] = {
    'name': obj.name,
    'foo': obj.foo
  }

});


console.log(new_data);

answered Mar 30, 2016 at 4:37

NOBrien

4593 silver badges7 bronze badges

Comments

omarjmh · Accepted Answer · 2016-03-30 04:39:20Z

0

In ES5: working JSBIN: https://jsbin.com/qudeze/edit?js,console

var data = [
  {'id': 100, name: 'bob', foo: 'bar'},
  {'id': 200, name: 'john', foo: 'qux'}
];


var new_data = {
  100: {name: 'bob', foo: 'bar'}, 
  200: {name: 'john', foo: 'qux'}
};

var y = data.reduce(function(result, next) {
  result[next.id] = {name: next.name, foo: next.foo};
  return result;
}, {});


console.log(y);

answered Mar 30, 2016 at 4:39

omarjmh

13.9k6 gold badges37 silver badges42 bronze badges

Comments

Laxminarayan · Accepted Answer · 2016-03-30 04:49:47Z

0

Your code should be go like this....

<script type="text/javascript">
    var data = [
          {'id': 100, name: 'bob', foo: 'bar'},
          {'id': 200, name: 'john', foo: 'qux'}
        ];

    var new_data = {};
    for(var i=0; i<data.length; i++){
        var element = {};
        element["name"] = data[i].name;
        element["foo"] = data[i].foo;
        new_data[data[i].id] = element;             
    }
console.log(JSON.stringify(new_data));

answered Mar 30, 2016 at 4:49

Laxminarayan

1983 silver badges17 bronze badges

Comments

Ricky Jiao · Accepted Answer · 2016-03-30 05:36:14Z

0

I don't think we could use map method. Because our output is not an array but an object. We could use each method to help us. Here is a sample code:

var data = [
    {'id': 100, name: 'bob', foo: 'bar'},
    {'id': 200, name: 'john', foo: 'qux'}
];

var result = {};

data.forEach(function(item){
   var key = item.id;

   //remove id from item
   delete item.id;

   result[key] = item;
});

console.log(result);

Note, this solution will modify the original array. If you don't want change the original one, just copy one.

answered Mar 30, 2016 at 5:36

Ricky Jiao

5294 silver badges10 bronze badges

Collectives™ on Stack Overflow

Javascript: Convert a list of objects to an associative array

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related