How to convert an array of objects into a mapped object in JavaScript?

Question

How can I convert something like initialArray array of JSON objects into finalObject map?

var initialArray = [
             { id:'id1', name:'name1' },
             { id:'id2', name:'name2' },
             { id:'id3', name:'name3' },
             { id:'id4', name:'name4' }
          ];

var finalObject = {
                  'id1':'name1',
                  'id2':'name2',
                  'id3':'name3',
                  'id4':'name4'
               }

Things to consider:

IDs are strings.
I tried for in loop - couldn't make it to work - http://jsfiddle.net/5af9R/23/

Any ideas?

Those are just JavaScript objects, there is no JSON in your input. — Quentin
– Quentin, Commented Mar 2, 2012 at 21:04

Quentin · Accepted Answer · 2012-03-02 21:06:32Z

3

You need to operate on the objects in your array, not strings containing their indexes in the array.

You should also use a regular for loop to iterate over an array.

Your JSFiddle, fixed:

var x = [ {id:'1', img:'img1'}, {id:'2', img:'img2'}, {id:'3', img:'img3'} ];
var resp = {};

for( var i = 0 ; i < x.length ; i++ ){
    var obj = x[i];
    resp[obj.id] = obj.img;
}

document.write( JSON.stringify(resp, undefined, 2) );

answered Mar 2, 2012 at 21:06

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Adam Rackis · Accepted Answer · 2012-03-02 21:05:47Z

2

DEMO

You can loop over the array, and for each object, add a new property to finalObject whose property name is the id, and whose value is the name.

var finalObject = {};

for (var i = 0, max = initialArray.length; i < max; i++)
    finalObject[initialArray[i].id] = initialArray[i].name;

answered Mar 2, 2012 at 21:05

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Comments

kirilloid · Accepted Answer · 2012-03-02 21:04:39Z

1

resp[key.id] = key.img;

You correctly call it key. But you need a value;

resp[x[key].id] = x[key].img;

answered Mar 2, 2012 at 21:04

kirilloid

14.4k6 gold badges42 silver badges54 bronze badges

Comments

user748221 · Accepted Answer · 2012-03-02 21:08:39Z

1

var finalObject = initialArray.reduce(function(ret, obj){
  ret[obj.id] = obj.name;
  return ret;
}, {});

This solution is specific to the property names for the specific question, but Array.prototype.reduce is a function I use all the time for any sort of array iteration that requires a non-array result.

answered Mar 2, 2012 at 21:08

user748221

Comments

Sinetheta · Accepted Answer · 2012-03-02 21:09:22Z

1

You're not using For In correctly jsFiddle

var x = [ {id:'1', img:'img1'}, {id:'2', img:'img2'}, {id:'3', img:'img3'} ];
var resp = {};

for( var key in x ){
    resp['id' + x[key].id] = x[key].img;
}

document.write( JSON.stringify(resp, undefined, 2) );

answered Mar 2, 2012 at 21:09

Sinetheta

9,4495 gold badges33 silver badges52 bronze badges

2 Comments

Sherzod Over a year ago

Just need to remove the 'id'+ part and that's exactly what I needed. THanks!

Sinetheta Over a year ago

When I answered, your question specifically stated that you wanted 'id1':'name1' and that your initialArray = [ { id:'1', name:'name1' } so it needed the 'id' to be prepended. I didn't alter your initial array when I made my jsFiddle ;)

T I · Accepted Answer · 2012-03-02 21:09:42Z

0

for (var i=0; i<x.length; i++) {
    var id = 'id' + x[i].id;
    var img = x[i].img;
    resp[id] = img;
}

answered Mar 2, 2012 at 21:09

T I

9,9634 gold badges31 silver badges51 bronze badges

Comments

Rafay · Accepted Answer · 2012-03-02 21:18:45Z

0

if i have understood correctly you can do something like

var x =' [ {"id":"1", "img":"img1"}, {"id":"2", "img":"img2"}, {"id":"3", "img":"img3"}]';
var resp = {};
var json = $.parseJSON(x);
$(json).each(function(i,v){        
    resp[v.id]=v.img;
});

 console.log( resp);

DEMO

you talked about json but in the fiddle you provided there was no json even jquery was not added as a resource so i made some assumptions

answered Mar 2, 2012 at 21:18

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Comments

Yohann Tilotti · Accepted Answer · 2014-03-18 10:22:09Z

0

Today I was on the same question and I didn't find an answer here, except the answer of @adam-rackis.

The way I found is :

var initialArray = [
    { id:'id1', name:'name1' },
    { id:'id2', name:'name2' },
    { id:'id3', name:'name3' },
    { id:'id4', name:'name4' }
],
    finalObject = {};

$.each(initialArray, function(k,v) {
    finalObject[v.name] = v.value;
});

edited Mar 18, 2014 at 10:22

answered Mar 18, 2014 at 10:10

Yohann Tilotti

16510 bronze badges

Collectives™ on Stack Overflow

How to convert an array of objects into a mapped object in JavaScript?

8 Answers 8

Comments

Comments

Comments

Comments

2 Comments

Comments

DEMO

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Linked

Related