How to convert array to object using loop (forEach, map, etc..) in Javascript

Question

From

[
  {
    "id": "0001",
    "name": "Jack",
    "completeName": "Jack Smith"
  },
  {
    "id": "0002",
    "name": "Mary",
    "completeName": "Mary Jackson"
  },
  {
    "id": "0003",
    "name": "John",
    "completeName": "John Doe"
  }
]

to this:

{
  "Jack" :{
    "id": "0001",
    "name": "Jack",
    "completeName": "Jack Smith"
  },
  "Mary" : {
    "id": "0002",
    "name": "Mary",
    "completeName": "Mary Jackson"
  },
  "John": {
    "id": "0003",
    "name": "John",
    "completeName": "John Doe"
  }
}

Use reduce - create a new target object, walk all entries in reduce and add them on the fly to the target object with el.name as keys. Done. — jerch
– jerch, Commented Jul 25, 2021 at 18:00

Barmar · Accepted Answer · 2021-07-25 13:30:57Z

2

You can use .map() and Object.fromEntries().

var data = [{
    "id": "0001",
    "name": "Jack",
    "completeName": "Jack Smith"
  },
  {
    "id": "0002",
    "name": "Mary",
    "completeName": "Mary Jackson"
  },
  {
    "id": "0003",
    "name": "John",
    "completeName": "John Doe"
  }
];

var result = Object.fromEntries(data.map(el => [el.name, el]));

console.log(result);

answered Jul 25, 2021 at 13:30

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

2 Comments

Steve Over a year ago

How about if using this code? const arrayToObject = () => { let test: any = {} // insert loop here console.log('test: %o ', test) } arrayToObject()

Barmar Over a year ago

There's certainly nothing wrong with putting the code inside a function if you need to use it multiple times. But the function should take the object as a parameter. You might also want to make the property to use as the keys a parameter as well.

Abhi · Accepted Answer · 2021-07-25 13:40:52Z

2

1. using forEach :

var data = [{
    "id": "0001",
    "name": "Jack",
    "completeName": "Jack Smith"
  },
  {
    "id": "0002",
    "name": "Mary",
    "completeName": "Mary Jackson"
  },
  {
    "id": "0003",
    "name": "John",
    "completeName": "John Doe"
  }
];

var result = {};
data.forEach(function(val) {

  result[val["name"]] = val;

});

console.log(result);

2. Using object.assign and map:

var data = [{
    "id": "0001",
    "name": "Jack",
    "completeName": "Jack Smith"
  },
  {
    "id": "0002",
    "name": "Mary",
    "completeName": "Mary Jackson"
  },
  {
    "id": "0003",
    "name": "John",
    "completeName": "John Doe"
  }
];
let dictionary = Object.assign({}, ...data.map((x) => ({
  [x.name]: x
})));
console.log(dictionary);

edited Jul 25, 2021 at 13:40

answered Jul 25, 2021 at 13:26

Abhi

1,0251 gold badge9 silver badges14 bronze badges

2 Comments

Dmitry Kostyuk Over a year ago

forEach() isn't meant to change data, only loop through it. map(), filter() and reduce() are. These are functional programming methods, so it's best practice to keep them pure, meaning they shouldn't be used to change data outside their scope, however changing data with forEach() forces you to do just that by using a global variable.

Abhi Over a year ago

OP asked for forEach, map or other ways to get the result. It will certainly not break the code knowing different possible ways and it highly depends on the usecase.

Mamunur Rashid · Accepted Answer · 2021-07-25 13:42:39Z

1

You can use an array reduce method. Array.prototype.reduce()

const test = [
  {
    "id": "0001",
    "name": "Jack",
    "completeName": "Jack Smith"
  },
  {
    "id": "0002",
    "name": "Mary",
    "completeName": "Mary Jackson"
  },
  {
    "id": "0003",
    "name": "John",
    "completeName": "John Doe"
  }
];

const results = test.reduce((obj, props) => {
  obj[props.name] = props;
  return obj;
} , {});

console.log(results);

answered Jul 25, 2021 at 13:42

Mamunur Rashid

1,17719 silver badges38 bronze badges

3 Comments

Steve Over a year ago

Can i use forEach loop only?

Mamunur Rashid Over a year ago

Yes, you can use it, however, there is a lot of ways to convert an array to object

Dmitry Kostyuk Over a year ago

forEach() isn't meant to change data, only loop through it. map(), filter() and reduce() are. These are functional programming methods, so it's best practice to keep them pure, meaning they shouldn't be used to change data outside their scope, however changing data with forEach() forces you to do just that by using a global variable.

Danziger · Accepted Answer · 2023-08-22 17:03:05Z

You can use Array.prototype.reduce() like so:

const data = [{
  "id": "0001",
  "name": "Jack",
  "completeName": "Jack Smith"
}, {
  "id": "0002",
  "name": "Mary",
  "completeName": "Mary Jackson"
}, {
  "id": "0003",
  "name": "John",
  "completeName": "John Doe"
}];

const usersByName = data.reduce((acc, cur) => {
  acc[cur.name] = cur;
  
  return acc;
}, {});

console.log(usersByName);

Or Object.fromEntries():

const data = [{
  "id": "0001",
  "name": "Jack",
  "completeName": "Jack Smith"
}, {
  "id": "0002",
  "name": "Mary",
  "completeName": "Mary Jackson"
}, {
  "id": "0003",
  "name": "John",
  "completeName": "John Doe"
}];

const usersByName = Object.fromEntries(data.map(entry => [entry.name, entry]))

console.log(usersByName);

Or a Map:

const data = [{
  "id": "0001",
  "name": "Jack",
  "completeName": "Jack Smith"
}, {
  "id": "0002",
  "name": "Mary",
  "completeName": "Mary Jackson"
}, {
  "id": "0003",
  "name": "John",
  "completeName": "John Doe"
}];

const usersByName = new Map(data.map(entry => [entry.name, entry]));

console.log(Object.fromEntries(usersByName.entries()));

While the Array.prototype.reduce() option might be the most common one, as it has existed for many years, I find the more recent Object.entries() alternative quite intuitive.

Dmitry Kostyuk · Accepted Answer · 2021-07-25 14:31:52Z

-1

You need to take your data, let's say it's stored in the data variable, and reduce() it with this one-liner:

const output = data.reduce((acc, row) => ({ ...acc, [row.name]: row }), {} );

const data = [
  {
    id: '0001',
    name: 'Jack',
    completeName: 'Jack Smith',
  },
  {
    id: '0002',
    name: 'Mary',
    completeName: 'Mary Jackson',
  },
  {
    id: '0003',
    name: 'John',
    completeName: 'John Doe',
  },
];

const output = data.reduce((acc, row) => ({ ...acc, [row.name]: row }), {});

console.log(output);

edited Jul 25, 2021 at 14:31

answered Jul 25, 2021 at 13:56

Dmitry Kostyuk

1,4691 gold badge9 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to convert array to object using loop (forEach, map, etc..) in Javascript

5 Answers 5

2 Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related