js: fill object with array elements using reduce()

Question

trying to learn reduce() but can't understand it well yet. Maybe someone from you could help me with my problem.

I have an object with defined keys and an array. I would like to fill up the objects keys with the arrays values using reduce().

My sandbox LINK

Till now I tried something like this:

const myObj = {
  first: null,
  second: null,
  third: null
}

const myArr = [ "abc", "def", "ghi"]

const newObj = myArr.reduce((result, value, index) => {
  result[index] = value
  return result
}, myObj)

console.log(newObj)
// 0: "abc"
// 1: "def"
// 2: "ghi"
// first: null
// second: null
// third: null

expected result:

{
  first: "abc",
  second: "def",
  third: "ghi"
}

Thanks for any help.

indexes are numbers 0,1,2 and so on.. so it doesnt identify it as first second or third — cmgchess
– cmgchess, Commented Jul 5, 2022 at 9:36
@cmgchess thanks, but this I already know. Just dont know, how to change it :/ — Dariusz Legizynski
– Dariusz Legizynski, Commented Jul 5, 2022 at 9:43

gog · Accepted Answer · 2022-07-05 09:50:35Z

4

You need to change index into "an object key at index":

const newObj = myArr.reduce((result, value, index) => {
    result[Object.keys(myObj)[index]] = value
    return result
}, myObj)

That said, zip + Object.fromEntries would be more appropriate for the job:

const zip = (...args) => args[0].map((_, i) => args.map(a => a[i]));

const myObj = {
    first: null,
    second: null,
    third: null
}

const myArr = [ "abc", "def", "ghi"]

const result = Object.fromEntries(
    zip(
        Object.keys(myObj),
        myArr
    )
)

console.log(result)

answered Jul 5, 2022 at 9:50

gog

11.4k2 gold badges29 silver badges42 bronze badges

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

Comments

gog · Accepted Answer · 2022-07-05 11:20:58Z

2

Run through Object.keys and reassign the values for each key from myArr.

const myObj = {
  first: null,
  second: null,
  third: null
};

const myArr = [ "abc", "def", "ghi"];

Object.keys(myObj).forEach((k,i)=>myObj[k]=myArr[i]);

console.log(myObj);

edited Jul 5, 2022 at 11:20

gog

11.4k2 gold badges29 silver badges42 bronze badges

answered Jul 5, 2022 at 10:08

JMP

4,62117 gold badges34 silver badges44 bronze badges

Comments

bloodyKnuckles · Accepted Answer · 2022-07-05 10:24:22Z

1

Using switch to determine which object key to assign value to:

const myArr = ["abc", "def", "ghi"];

const newObj = myArr.reduce((result, value, index) => {
  let key;
  switch (index) {
    case 0: key = "first"; break;
    case 1: key = "second"; break;
    case 2: key = "third"; break;
  }
  result[key] = value;
  return result;
}, {});

console.log(newObj);

OR, for a more flexible option that does not rely on the descriptive key word:

const myArr = ["abc", "def", "ghi", "jkl", "mno"];

const newObj = myArr.reduce((result, value, index) => {
  result[(index + 1).toString()] = value;
  return result;
}, {});

console.log(newObj);

/*
{
  "1": "abc",
  "2": "def",
  "3": "ghi",
  "4": "jkl",
  "5": "mno"
}
*/

Here's a SO solution that converts an integer to an ordinal, i.e., 1 to "first", 2 to "second", etc.—up to "ninety-ninth". That gives you ordinal keys, and eliminates the need for the object myObj. By depending on myObj to provide the key names you'll need to predetermine how many elements are in myArr, and be sure there's a key in myObj for each.

edited Jul 5, 2022 at 10:24

answered Jul 5, 2022 at 9:36

bloodyKnuckles

12.2k4 gold badges32 silver badges39 bronze badges

3 Comments

Dariusz Legizynski Over a year ago

Thanks for the answer. It just feels like too much typing with all of those switch cases. What if the object has like 100 keys?

bloodyKnuckles Over a year ago

A legitimate concern. What key naming scheme do you propose? First, Second, Third, Fourth, Fifth, etc.

Dariusz Legizynski Over a year ago

yes, exacly like this. In the end it really doesnt matter ;-)

Collectives™ on Stack Overflow

js: fill object with array elements using reduce()

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related