Question

我正在将对象转换为数组，但打字稿抛出并出错：

<块引用>

“类型 'unknown' 上不存在属性 'map'”

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

在此实时演示中，您不会看到 打字稿错误，但在我的 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() 而不是 array 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))

需要帮助从对象创建数组以呈现数据

2 个答案: