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

【问题标题】：How to create an array from an object to render data如何从对象创建数组以呈现数据
【发布时间】：2021-03-15 21:47:34
【问题描述】：

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

“类型‘未知’上不存在属性‘地图’”

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

Live Demo

在这个现场演示中，您不会看到 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
  },
  ...
]

【问题讨论】：

你的 ES 版本是多少？检查您是否拥有 ES2017，因为它是在同一版本中引入的。
value 是对象的类型，map 只有在它是一个数组时才可用。
尝试将类型添加到value。将 [key, value] 更改为 [key, value]: [string, Array<{ id: number; name: string; lastname: string; }>]

标签： javascript angular typescript lodash

【解决方案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 }))
  )
...
}

【讨论】：

【解决方案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))

【讨论】：