我有一組來自 api 的物件。資料格式如下：
[
{
"__typename": "directus_fields",
"field": "heading",
"type": "string",
"schema": {
"__typename": "directus_fields_schema",
"max_length": 255,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "hero",
"validation_message": null,
"id": 37,
"required": false,
"validation": null,
"interface": "input",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "introduction",
"type": "text",
"schema": {
"__typename": "directus_fields_schema",
"max_length": null,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "about_us",
"validation_message": null,
"id": 38,
"required": false,
"validation": null,
"interface": "input-rich-text-html",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "campaign_title",
"type": "string",
"schema": {
"__typename": "directus_fields_schema",
"max_length": 255,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "campaign",
"validation_message": null,
"id": 41,
"required": false,
"validation": null,
"interface": "input",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "campaign_duration",
"type": "string",
"schema": {
"__typename": "directus_fields_schema",
"max_length": 255,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "campaign",
"validation_message": null,
"id": 42,
"required": false,
"validation": null,
"interface": "input",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "campaign_text",
"type": "text",
"schema": {
"__typename": "directus_fields_schema",
"max_length": null,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "campaign",
"validation_message": null,
"id": 43,
"required": false,
"validation": null,
"interface": "input-rich-text-html",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "campaign_image",
"type": "uuid",
"schema": {
"__typename": "directus_fields_schema",
"max_length": 36,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "campaign",
"validation_message": null,
"id": 44,
"required": false,
"validation": null,
"interface": "file-image",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "philosophy_title",
"type": "string",
"schema": {
"__typename": "directus_fields_schema",
"max_length": 255,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "philosophy",
"validation_message": null,
"id": 45,
"required": false,
"validation": null,
"interface": "input",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "philosophy_text",
"type": "text",
"schema": {
"__typename": "directus_fields_schema",
"max_length": null,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "philosophy",
"validation_message": null,
"id": 46,
"required": false,
"validation": null,
"interface": "input-rich-text-html",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "title",
"type": "string",
"schema": {
"__typename": "directus_fields_schema",
"max_length": 255,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "about_us",
"validation_message": null,
"id": 52,
"required": false,
"validation": null,
"interface": "input",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "hero_text",
"type": "text",
"schema": {
"__typename": "directus_fields_schema",
"max_length": null,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "hero",
"validation_message": null,
"id": 164,
"required": false,
"validation": null,
"interface": "input-rich-text-html",
"hidden": false
}
}
]
我想按元組名稱對陣列中的資料進行分組。所有相似的元組名稱都應該在一個新的陣列物件中。
我試過了，但我無法讓它作業
const tree = [];
const children = {};
data.forEach((item) => {
const newItem = { ...item } as ParsedMenuItem;
const { id: newItem?.meta?.group, parentId: parentId = 0 } = newItem;
children[id] = children[id] || [];
newItem.childMenu = children[id];
parentId
? (children[parentId] = children[parentId] || []).push(newItem)
: tree.push(newItem);
});
return tree;
我只希望所有類似的元組名稱都在一個物件下。由于嵌套結構，我不知道如何解決這個問題。
uj5u.com熱心網友回復：
您可以使用 對資料進行meta.group分組Array.reduce()。這是一個例子：
result = data.reduce((a, i) => {
a[i.meta.group] = a[i.meta.group] || [];
a[i.meta.group].push(i);
return a;
}, {});
console.log(result)<script>
let data = [{
"__typename": "directus_fields",
"field": "heading",
"type": "string",
"schema": {
"__typename": "directus_fields_schema",
"max_length": 255,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "hero",
"validation_message": null,
"id": 37,
"required": false,
"validation": null,
"interface": "input",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "introduction",
"type": "text",
"schema": {
"__typename": "directus_fields_schema",
"max_length": null,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "about_us",
"validation_message": null,
"id": 38,
"required": false,
"validation": null,
"interface": "input-rich-text-html",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "campaign_title",
"type": "string",
"schema": {
"__typename": "directus_fields_schema",
"max_length": 255,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "campaign",
"validation_message": null,
"id": 41,
"required": false,
"validation": null,
"interface": "input",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "campaign_duration",
"type": "string",
"schema": {
"__typename": "directus_fields_schema",
"max_length": 255,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "campaign",
"validation_message": null,
"id": 42,
"required": false,
"validation": null,
"interface": "input",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "campaign_text",
"type": "text",
"schema": {
"__typename": "directus_fields_schema",
"max_length": null,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "campaign",
"validation_message": null,
"id": 43,
"required": false,
"validation": null,
"interface": "input-rich-text-html",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "campaign_image",
"type": "uuid",
"schema": {
"__typename": "directus_fields_schema",
"max_length": 36,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "campaign",
"validation_message": null,
"id": 44,
"required": false,
"validation": null,
"interface": "file-image",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "philosophy_title",
"type": "string",
"schema": {
"__typename": "directus_fields_schema",
"max_length": 255,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "philosophy",
"validation_message": null,
"id": 45,
"required": false,
"validation": null,
"interface": "input",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "philosophy_text",
"type": "text",
"schema": {
"__typename": "directus_fields_schema",
"max_length": null,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "philosophy",
"validation_message": null,
"id": 46,
"required": false,
"validation": null,
"interface": "input-rich-text-html",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "title",
"type": "string",
"schema": {
"__typename": "directus_fields_schema",
"max_length": 255,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "about_us",
"validation_message": null,
"id": 52,
"required": false,
"validation": null,
"interface": "input",
"hidden": false
}
},
{
"__typename": "directus_fields",
"field": "hero_text",
"type": "text",
"schema": {
"__typename": "directus_fields_schema",
"max_length": null,
"is_unique": false,
"is_nullable": true
},
"meta": {
"__typename": "directus_fields_meta",
"group": "hero",
"validation_message": null,
"id": 164,
"required": false,
"validation": null,
"interface": "input-rich-text-html",
"hidden": false
}
}
]
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/490133.html
標籤：javascript