CODEWITHSUNDEEP
javascriptarraysjavascript-objects
Joseph
Joseph

Reputation: 13178

Javascript: Convert a list of objects to an associative array

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.

Upvotes: 2

Views: 15156

Answers (6)

Ricky Jiao
Ricky Jiao

Reputation: 529

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.

Upvotes: 0

user663031
user663031

Reputation:

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

Upvotes: 6

Laxminarayan
Laxminarayan

Reputation: 198

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

Upvotes: 0

Dhananjaya Kuppu
Dhananjaya Kuppu

Reputation: 1322

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

Upvotes: 2

omarjmh
omarjmh

Reputation: 13888

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

Upvotes: 0

NOBrien
NOBrien

Reputation: 459

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

Upvotes: 0

Related Questions