Reducing an array of objects to key value map

Question

I have an array of objects. I need to make an object so that I can fetch the name based on an id.

const drinks = [
  { _id: "5fe40ad4d2e6e6de85c46a6c", name: "Americano", __v: 0 },
  { _id: "5fe40ad4d2e6e6de85c46a6d", name: "Latte", __v: 0 },
  { _id: "5fe40ad4d2e6e6de85c46a6e", name: "Flat White", __v: 0 }
];

I tried this which almost works:

console.log(drinks.reduce(
  (accumulator, currentValue) => 
     Object.assign(accumulator, accumulator[currentValue._id] = currentValue.name), {}));

However it outputs:

Object { 
  0: "F", 1: "l", 2: "a", 3: "t", 4: " ", 5: "W", 6: "h", 7: "i", 8: "t", 9: "e",
  5fe40ad4d2e6e6de85c46a6c: "Americano", 
  5fe40ad4d2e6e6de85c46a6d: "Latte", 
  5fe40ad4d2e6e6de85c46a6e: "Flat White" 
}

I need:

Object { 
  5fe40ad4d2e6e6de85c46a6c: "Americano", 
  5fe40ad4d2e6e6de85c46a6d: "Latte", 
  5fe40ad4d2e6e6de85c46a6e: "Flat White"
}

Why is my function also breaking down one of the values into characters?

Nilesh Patel · Accepted Answer · 2020-12-24 04:36:24Z

3

const drinks = [{ _id: "5fe40ad4d2e6e6de85c46a6c", name: "Americano", __v: 0 },
                { _id: "5fe40ad4d2e6e6de85c46a6d", name: "Latte", __v: 0 },
                { _id: "5fe40ad4d2e6e6de85c46a6e", name: "Flat White", __v: 0 }];
                
                const result=drinks.reduce((acc,curr)=>{
                acc[curr._id]=curr.name;
                return acc;
                },{})
                
console.log(result)

answered Dec 24, 2020 at 4:36

Nilesh Patel

3,3079 silver badges13 bronze badges

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

Comments

Phil · Accepted Answer · 2020-12-24 04:43:53Z

3

You can map your array into an array of entries (key / value pairs) which you can then run through Object.fromEntries() to create the final object

const drinks = [
  { _id: "5fe40ad4d2e6e6de85c46a6c", name: "Americano", __v: 0 },
  { _id: "5fe40ad4d2e6e6de85c46a6d", name: "Latte", __v: 0 },
  { _id: "5fe40ad4d2e6e6de85c46a6e", name: "Flat White", __v: 0 }
]
                
const result = Object.fromEntries(drinks.map(({ _id, name }) =>
  [ _id, name ]))
  
console.log(result)

The longer version would be something like this

const result = drinks.reduce((obj, { _id, name }) => ({
  ...obj, // spread syntax is like `Object.assign()`
  [ _id ]: name // use `_id` as a dynamic object key with value `name`
}), {})

The issue with your current code is that the result of...

accumulator[currentValue._id] = currentValue.name

is the value assigned (ie currentValue.name). When used as an argument in Object.assign(), it is broken down as object entries, thus resulting in what you're seeing with

{ 
  0: "F", 
  1: "l", 
  2: "a", 
  3: "t", 
  4: " ", 
  5: "W", 
  6: "h", 
  7: "i", 
  8: "t", 
  9: "e"
}

edited Dec 24, 2020 at 4:43

answered Dec 24, 2020 at 4:37

Phil

166k25 gold badges265 silver badges269 bronze badges

1 Comment

Vlad L Over a year ago

Thanks for explaining what's going on!

Siva Kondapi Venkata · Accepted Answer · 2020-12-24 05:06:56Z

1

Just pass the object { [currentValue._id]: currentValue.name } to assign instead of assignment accumulator[currentValue._id] = currentValue.name

const drinks = [
  { _id: "5fe40ad4d2e6e6de85c46a6c", name: "Americano", __v: 0 },
  { _id: "5fe40ad4d2e6e6de85c46a6d", name: "Latte", __v: 0 },
  { _id: "5fe40ad4d2e6e6de85c46a6e", name: "Flat White", __v: 0 }
];

console.log(drinks.reduce(
  (accumulator, currentValue) => 
     Object.assign(accumulator, { [currentValue._id]: currentValue.name }), {}));

answered Dec 24, 2020 at 5:06

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

1 Comment

Vlad L Over a year ago

Thanks, this is closest to what I was trying to achieve

Swaraj Gandhi · Accepted Answer · 2020-12-24 05:08:24Z

-2

This will work

drinks.map(({ _id, name }) => ({
  [_id]: name
}))

edited Dec 24, 2020 at 5:08

answered Dec 24, 2020 at 4:37

Swaraj Gandhi

7143 silver badges16 bronze badges

1 Comment

Nick Parsons Over a year ago

This will output an array of objects, not a single object...

Collectives™ on Stack Overflow

Reducing an array of objects to key value map

4 Answers 4

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related