如何从对象创建数组以呈现数据

Question

我正在将对象转换为数组，但 TypeScript 抛出错误：

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

（是的，我用谷歌搜索了那个错误，但网络上没有什么很清楚）

在此实时演示中，您不会看到 TypeScript 错误，但在我的 Angular 应用程序中，我可以看到它并且它导致了问题。

如何使用 Lodash 或 JavaScript 将此对象转换为我的现场演示中显示的相同数组？

这是代码：

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 }))]
}, []);

这是我想要的输出：

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

Answer 1

TS 无法推断出 Array.reduce() 累加器的类型（末尾的空数组）。您可以将累加器设置为您希望最终得到的数组类型(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[])   
...
}

另一种选择是使用 Array.flatMap() 而不是数组 reduce，但你需要将 TS Config 中的目标更改为 es2019 (TS Playground):

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

并且如果你使用lodash，你可以使用_.flatMap()，无需改变目标（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 }))
  )
...
}

Answer 2

您可以遍历对象键并以这种方式获得结果

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

如何从对象创建数组以呈现数据

How to create an array from an object to render data

javascript

typescript

lodash

angular