How to create an array from an object to render data

Question

I'm converting an object into an array but TypeScript throws and error:

"Property 'map' does not exist on type 'unknown'"

(Yes, I googled that error but nothing very clear on the web)

In this live demo you will not see the TypeScript error but in my Angular app I can see it and it's causing issues.

How can I convert this object to the same array shown on my live demo using Lodash or JavaScript?

This is the code:

dataObject = {
A: [
    {id: 1, name: 'Mike', lastname: 'asmith'},
    {id: 2, name: 'Mary', lastname: 'alters'},
    {id: 3, name: 'Boris', lastname: 'al'}
],
B: [
    {id: 1, name: 'Lauren', lastname: 'bmith'},
    {id: 2, name: 'Travis', lastname: 'balters'},
    {id: 3, name: 'Barn', lastname: 'bl'}
], 
...
}
  
dataObjectDisp = Object.entries(this.dataObject).reduce((prev, [key, value]) =>{
  return [...prev, ...value.map((user, index) => ({ 
    ...user, parent: key, index }))]
}, []);

This is the output that I want:

 [
  {
    "id": 1,
    "name": "Mike",
    "lastname": "asmith",
    "parent": "A",
    "index": 0
  },
  {
    "id": 2,
    "name": "Mary",
    "lastname": "alters",
    "parent": "A",
    "index": 1
  },
  ...
]

What is your ES version? Check that you have ES2017 as it was introduced in same. — Taher Ghulam Mohammed
– Taher Ghulam Mohammed, Commented Mar 15, 2021 at 21:53
value is type of object and map is only available if it is an Array. — Taher Ghulam Mohammed
– Taher Ghulam Mohammed, Commented Mar 15, 2021 at 22:04
Try to add type to value. Change [key, value] to something like [key, value]: [string, Array<{ id: number; name: string; lastname: string; }>] — Faustyn Piechowiak
– Faustyn Piechowiak, Commented Mar 15, 2021 at 22:08

Ori Drori · Accepted Answer · 2021-03-16 06:28:56Z

TS can't infer the type of Array.reduce() accumulator (the empty array at the end). You can set the accumulator as the type of array you wish to get in the end (TS Playground):

type Obj = {
  "id": number,
  "name": string,
  "lastname": string,
  "parent": string,
  "index": number
};

export class AppComponent implements OnInit {
...
  dataObjectDisp = Object.entries(this.dataObject).reduce((prev, [key, value]) =>{
    return [...prev, ...value.map((user, index) => ({ 
      ...user, parent: key, index }))]
  }, [] as Obj[])   
...
}

Another option is to use Array.flatMap() instead of array reduce, but you'll need to change the target in TS Config to es2019 (TS Playground):

export class AppComponent implements OnInit {
...
  dataObjectDisp = Object.entries(this.dataObject).flatMap(([key, value]) =>
    value.map((user, index) => ({ ...user, parent: key, index }))
  )
...
}

And if you use lodash, you can use _.flatMap(), without changing the target (TS Playground):

import { flatMap } from 'lodash';

export class AppComponent implements OnInit {
...
  dataObjectDisp = flatMap(this.dataObject, (value, key) =>
    value.map((user, index) => ({ ...user, parent: key, index }))
  )
...
}

Nonik · Accepted Answer · 2021-03-15 23:45:25Z

0

you can iterate through objects keys and get your result this way

var dataObject = {
  A: [{
      id: 1,
      name: 'Mike',
      lastname: 'asmith'
    },
    {
      id: 2,
      name: 'Mary',
      lastname: 'alters'
    },
    {
      id: 3,
      name: 'Boris',
      lastname: 'al'
    }
  ],
  B: [{
      id: 1,
      name: 'Lauren',
      lastname: 'bmith'
    },
    {
      id: 2,
      name: 'Travis',
      lastname: 'balters'
    },
    {
      id: 3,
      name: 'Barn',
      lastname: 'bl'
    }
  ],
};

const convert = (obj) => {
  var result = [];
  for (var key in obj) {

    result = result.concat(obj[key])
  }
  return result;
}
console.log(convert(dataObject))

answered Mar 15, 2021 at 23:45

Nonik

6454 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to create an array from an object to render data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related