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"
 }
}

• jerch: 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.

Answer 1

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);

• Steve: How about if using this code? const arrayToObject = () => { let test: any = {} // insert loop here console.log('test: %o ', test) } arrayToObject()
• Barmar: 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.

Answer 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);

• Dmitry Kostyuk: 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: 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.

Answer 3

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);

• Steve: Can i use forEach loop only?
• Mamunur Rashid: Yes, you can use it, however, there is a lot of ways to convert an array to object
• Dmitry Kostyuk: 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.

Answer 4

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.

Answer 5

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);