如何根据有多少键将一个对象变成多个对象？答案

【问题标题】：How do I turn one object into multiple objects depending on how many keys there are?如何根据有多少键将一个对象变成多个对象？
【发布时间】：2022-01-11 21:47:44
【问题描述】：

我有一个简单问题。

我想把这个数组一个对象...

[
    {
        id: 1,
        caseId: "Default Case Set",
        casenbr: "CASEWORK",
        submitterCasenbr: 34,
        othref: 0,
        sta: 0,
        type: 0,
        create: 0,
        startd: 0
    }
]

到一个数组多个对象像这样...

[
    {
        id: 1
    },
    {
        caseId: "Default Case Set"
    },
    {
        casenbr: "CASEWORK"
    },
    {
        submitterCasenbr: 34
    },
    {
        othref: 0
    },
    {
        sta: 0
    },
    {
        type: 0
    },
    {
        create: 0
    },
    {
        startd: 0
    }
]

最好的方法是什么？基本上，我想把对象中的所有键/值对都变成对象。

所以，如果我有一个包含 100 个键/值对的 一个对象 数组，我想创建一个只有一个键的 100 个对象 数组/值对。

我这样做的原因是创建一个数组，可以在我的 Angular 13 应用程序中用于 ngFor 指令。

我不知道 Angular 中的 ngFor 是否有办法在一个数组中重复一个对象的键/值对，所以这就是我正在创建一个由多个对象组成的数组。

【问题讨论】：

"最好的方法是什么" 任何事情中的最好的通常都是相当主观的，哪种类型的问题显然是题外话在help center 中定义的站点范围。相反，在以minimal reproducible example 的形式发布之前，请向我们展示您为尝试执行此操作而编写的代码，并简要说明您在上述尝试中遇到的问题。另见：How to Ask
查找Object.keys 以获取属性名称数组...然后循环该数组并为每个数组创建一个对象。
ngFor 确实有能力使用称为 keyvalue 的管道循环键/值对。这是一个描述它的答案：stackoverflow.com/questions/35534959/…

标签： javascript angular object

【解决方案1】：

我认为这个问题不应该被关闭，因为答案更符合如何使用 ngFor。

如果你想循环说你的数组，然后循环你所有的键作为列，你可以有这样的东西：

<table>
  <thead>
    <tr>
      <th *ngFor="let column of data[0] | keyvalue">
        {{ column.key }}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of data">
      <td *ngFor="let column of row | keyvalue">
         {{ column.value }}
      </td>
    </tr>
  </tbody>
</table>

这将为您提供一个模仿您的数据的表格（连同标题）。请参阅此堆栈闪电战：https://stackblitz.com/edit/angular-daubr3?file=src%2Fapp%2Fapp.component.html

【讨论】：

【解决方案2】：

要在 JavaScript 中直接实现这一点，您可以使用静态方法 Object.entries() 来解构每个键和值，然后使用 Object.fromEntries() 将它们重构为新的数组元素。

// Original Array with object
const array = [
  {
    id: 1,
    caseId: "Default Case Set",
    casenbr: "CASEWORK",
    submitterCasenbr: 34,
    othref: 0,
    sta: 0,
    type: 0,
    create: 0,
    startd: 0,
  },
];

// Create an array of entries from the object
const [entries] = array.map((el) => Object.entries(el));
console.log(entries);
/* 
entries OUTPUT:
[
  [ 'id', 1 ],
  [ 'caseId', 'Default Case Set' ],
  [ 'casenbr', 'CASEWORK' ],
  [ 'submitterCasenbr', 34 ],
  [ 'othref', 0 ],
  [ 'sta', 0 ],
  [ 'type', 0 ],
  [ 'create', 0 ],
  [ 'startd', 0 ]
]
*/

// Create new array of Objects from entries
const newArray = entries.map((entry) => Object.fromEntries([entry]));
console.log(newArray);
/* 
newArray OUTPUT:
[
  { id: 1 },
  { caseId: 'Default Case Set' },
  { casenbr: 'CASEWORK' },
  { submitterCasenbr: 34 },
  { othref: 0 },
  { sta: 0 },
  { type: 0 },
  { create: 0 },
  { startd: 0 }
]
*/

【讨论】：

问题是要求在ngFor中使用迭代器，技术上它可以直接循环对象，请参考其他答案

【解决方案3】：

console.log([{
  id: 1,
  caseId: "Default Case Set",
  casenbr: "CASEWORK",
  submitterCasenbr: 34,
  othref: 0,
  sta: 0,
  type: 0,
  create: 0,
  startd: 0
}].reduce((acc, obj) => {
  Object.keys(obj).forEach((key) => {
    acc.push({[key]: obj[key]})
  });
  return acc;
}, []));

这是一种方法。通过使用 Array.reduce 和 Object.keys 的组合。请记住，如果您的根数组中有多个对象，它也会遍历这些对象并构造对象并将它们也累积到最终的输出数组中。但是，您的示例数据仅显示根数组中的 1 个对象。

正如其他人所提到的，我们缺少最终会告知帮助解决问题的最佳方法的上下文。但是这段代码应该可以实现你想要做的。

【讨论】：