javascript - Create a new object in Angular 11 app based on values in another array of objects - Stack Overflow

admin管理员组

文章数量:1415420

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)

本文标签： javascriptCreate a new object in Angular 11 app based on values in another array of objectsStack Overflow