JavaScript -- how to iterate through an array of objects to create a new object whose key is the value of the original object's initial key/value pair

Question

Here is my situation:

I have to implement a function "mapById", which, when given an array of objects, returns an object, where the keys are the ids of the input objects and the values are the corresponding input objects.

var input = [{id: 102, name: "Alice"},
             {id: 205, name: "Bob", title: "Dr."},
             {id: 592, name: "Claire", age: 32}];

console.log(mapById(input));

should give the result below:

102: {id: 102, name: "Alice"},
205: {id: 205, name: "Bob", title: "Dr."},
592: {id: 592, name: "Claire", age: 32}

Here is my function thus far:

function mapById(list) {
    var obj = {};
    var objectKey = '';
    list.forEach(function(item) {
        objectKey = (Object.values(item)[0]);
        var obj = {[objectKey]: item};
    });
    return obj;
}

I can get a new key/value pair for each object in the original array but I can't figure out how to add each new key/value pair to the new object.

ObjectKey: 102
item: { id: 102, name: 'Alice' }
obj: { '102': { id: 102, name: 'Alice' } }
ObjectKey: 205
item: { id: 205, name: 'Bob', title: 'Dr.' }
obj: { '205': { id: 205, name: 'Bob', title: 'Dr.' } }
ObjectKey: 592
item: { id: 592, name: 'Claire', age: 32 }
obj: { '592': { id: 592, name: 'Claire', age: 32 } }

How can i fix this? If this was an array I could use the 'push' method. Is there a similar method for objects? Do I need a closure? I know this is basic stuff but I'm quite new to javascript.

Thanks.

edited the question for clarity

cocomatt
– cocomatt

2018-01-27 23:51:25 +00:00
Commented Jan 27, 2018 at 23:51 — cocomatt
– cocomatt, Commented Jan 27, 2018 at 23:51

Jonas Wilms · Accepted Answer · 2024-06-05 19:11:46Z

5

You are actually quite close:

function mapById(list) {
    var obj = {};
    list.forEach(function(item) {
        obj[item.id] = item;
    });
    return obj;
}

How i would do that:

 const result = Object.fromEntries(input.map(el => ([el.id, el])));

edited Jun 5, 2024 at 19:11

answered Jan 27, 2018 at 22:40

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

6 Comments

terales Over a year ago

Wow, your approach is like black magic for me. Can you describe how it works, please?

Jonas Wilms Over a year ago

@terales it maps the array to an array of key-value pair like objects and unifies these objects by spreading them into Object.assign

terales Over a year ago

But Object.entries returns an array, how do you cast it to object?

Jonas Wilms Over a year ago

@terales ouch. Shoulve been Object.assign, sorry. Good night everyone :/

terales Over a year ago

oh, thanks. Now it's clear. I thought it was some clever trick and it was interesting to get over it :)

|

terales · Accepted Answer · 2018-01-27 22:40:57Z

3

Use Array.prototype.reduce():

var input = [{id: 102, name: "Alice"},
             {id: 205, name: "Bob", title: "Dr."},
             {id: 592, name: "Claire", age: 32}]
             
var output = input.reduce(function(accumulator, item) {
  accumulator[item.id] = item
  return accumulator
}, {})

console.log(output)

answered Jan 27, 2018 at 22:40

terales

3,21826 silver badges34 bronze badges

Comments

aaaidan · Accepted Answer · 2018-01-27 22:43:13Z

-1

var output = input.reduce(function(m,x,i) {
  m[x.id] = x
  return m
}, {})

The reduce function allows you to build a single object as you iterate an array. Notice the last parameter {} which initialises m to an empty object.

answered Jan 27, 2018 at 22:43

aaaidan

7,3868 gold badges69 silver badges107 bronze badges

2 Comments

Tibrogargan Over a year ago

The code posted is effectively identical to that in @terales answer, yet more terse. There is no value added here.

aaaidan Over a year ago

I don't see any other answer! I'm using the app

Collectives™ on Stack Overflow

JavaScript -- how to iterate through an array of objects to create a new object whose key is the value of the original object's initial key/value pair

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related