Create a new object in Angular 11 app based on values in another array of objects

Question

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.

prasanth · Accepted Answer · 2021-03-25 13:51:39Z

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)

answered Mar 25, 2021 at 13:51

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

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

2 Comments

suvenk Over a year ago

I am using the above code in Angular 11 app. I am getting errors 1) Parameter 'acc' implicitly has an 'any' type. 2) Binding element 'name' implicitly has an 'any' type. 3) Binding element 'value' implicitly has an 'any' type.

prasanth Over a year ago

sorry i don't know angular and type. please updated your question with angular tag. for ref please check stackoverflow.com/questions/14087489/…

denik1981 · Accepted Answer · 2021-03-25 14:53:47Z

2

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

edited Mar 25, 2021 at 14:53

answered Mar 25, 2021 at 14:47

denik1981

3804 silver badges12 bronze badges

Comments

Ori Drori · Accepted Answer · 2021-03-25 14:33:10Z

2

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)

edited Mar 25, 2021 at 14:33

answered Mar 25, 2021 at 13:49

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Collectives™ on Stack Overflow

Create a new object in Angular 11 app based on values in another array of objects

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related