我有一個簡單的問題。
我想把這個由一個物件組成的陣列...
[
{
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 是否有辦法重復一個陣列中一個物件的鍵/值對，所以這就是我正在創建一個由多個物件組成的陣列。
uj5u.com熱心網友回復：
我認為這個問題不應該被關閉，因為答案更符合如何使用 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/app/app.component.html
uj5u.com熱心網友回復：
要直接在 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 }
]
*/
uj5u.com熱心網友回復：
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 個物件。
正如其他人所提到的，我們缺少最終會告知幫助解決問題的最佳方法的背景關系。但是這段代碼應該實作你想要做的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/409241.html
標籤：