I am having an Angular 11 app in which I have an array of objects as shown below.

details = [
      {
        "name": "firstName",
        "content": "Tom"
      },
      {
        "name": "lastName",
        "content": "Smith"
      },
      {
        "name": "email",
        "content": "[email protected]"
      }
]

I want to create an object from above array as shown below.

output = {
   firstName: {value: "Tom"},
   lastName: {value: "Smith"},
   email: {value: "[email protected]"}
}

For simplicity I have only shown 3 objects in the details array but there can be any number of them. So I want the conversion to happen irrespective of the number of objects in the details array. How can I create the above output object? Please help me out.

I am having an Angular 11 app in which I have an array of objects as shown below.

details = [
      {
        "name": "firstName",
        "content": "Tom"
      },
      {
        "name": "lastName",
        "content": "Smith"
      },
      {
        "name": "email",
        "content": "[email protected]"
      }
]

I want to create an object from above array as shown below.

output = {
   firstName: {value: "Tom"},
   lastName: {value: "Smith"},
   email: {value: "[email protected]"}
}

For simplicity I have only shown 3 objects in the details array but there can be any number of them. So I want the conversion to happen irrespective of the number of objects in the details array. How can I create the above output object? Please help me out.

• javascript
• arrays
• angular
• typescript
• object

Share Improve this question Follow edited Mar 25, 2021 at 14:17 suvenk asked Mar 25, 2021 at 13:46 suvenksuvenk 51711 gold badge1111 silver badges2828 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

you could do with Array#reduce.

const details = [ { "name": "firstName", "content": "Tom" }, { "name": "lastName", "content": "Smith" }, { "name": "email", "content": "[email protected]" } ];

const res = details.reduce(
    (acc, {name, content: value}) => (acc[name] = {value}, acc), {}
);

console.log(res)

Not that I'm against to the other answers proposed. As an alternative you can also do it with the help of a "for-of" loop and applying destructured assignment.

const details = [ { "name": "firstName", "content": "Tom" }, { "name": "lastName", "content": "Smith" }, { "name": "email", "content": "[email protected]" } ];
let result = {}
for ({ name: n, content: value } of details) { result[n] = { value: value }; }
console.log(result)

MDN Reference - Deconstructuring Assignment

Map the array to an array of [name, { value }] pairs, and convert to an object using Object.fromEntries().

With Typescript you'll need to set the target as ES2019 at least in your TS config, and it doesn't require any type definition (TS Playground).

const details = [{"name":"firstName","content":"Tom"},{"name":"lastName","content":"Smith"},{"name":"email","content":"[email protected]"}]

const result = Object.fromEntries(
  details.map(({ name, content: value }) => [name, { value }])
)

console.log(result)