我有一組從 API 中排序的物件（產品資料）——這些物件包含重復鍵和重復資訊陣列，因為產品可以有許多類別和子類別。
{
"category":"e-liquid",
"subcategories":[
{
"attributes":{
"name":"50ml",
"id":19
}
},
{
"attributes":{
"name":"100ml",
"id":18
}
},
],
}
{
"category":"e-liquid",
"subcategories":[
{
"attributes":{
"name":"50ml",
"id":19
}
},
{
"attributes":{
"name":"100ml",
"id":18
}
},
],
}
{
"category":"e-liquid",
"subcategories":[
{
"attributes":{
"name":"50ml",
"id":19
}
}
]
}
{
"category":"hardware",
"subcategories":[
{
"attributes":"tanks",
"id":15
}
]
}
{
"category":"hardware",
"subcategories":[
{
"attributes":"tanks",
"id":15
},
{
"attributes":"coils",
"id":14
}
]
}
上面的每個 JSON 物件代表一個單獨的產品。
我希望能夠通過它們的類別鍵（即電子液體、硬體或任何其他東西）唯一地合并/減少所有子類別到一個單一的平面物件或陣列中，我想每個類別一個。就像是：
{
"category":"e-liquid",
"subcategories":[
"50ml",
"100ml",
"150ml",
"200ml",
"...anything else"
]
}
{
"category": "hardware",
"subcategories":[
"coils",
"tanks",
"batteries",
"...whatever else"
]
}
任何見解表示贊賞。在 stackoverflow 上搜索了一段時間，但似乎什么都沒有出現 - 已經嘗試了一些類似措辭問題的解決方案，但通常合并太淺，我無法理解如何深度合并（假設這是需要的）這里）。我的 lodash 在我的 nuxt 配置中不起作用，因此如果可能，我特別要求非 lodash 解決方案。
uj5u.com熱心網友回復：
我們可以通過構建一個在其鍵處具有類別的物件來按類別對物件進行分組。子類別的簡化有點棘手，因為子類別物件的結構因類別而異。
在下面的代碼片段中，我介紹subCatValue了一個物件，其值是指定如何獲取給定類別的顯著子類別值的函式。
按類別分組并通過reduce陣列一次完成子類別組合。第二次旅行清理重復的子類別。
const data = theAPIdata();
const subCatValue = {
'e-liquid': obj => obj.attributes.name,
'hardware': obj => obj.attributes
}
const index = data.reduce((acc, product) => {
acc[product.category] ??= { category: product.category, subcategories: [] };
// subCatValue[product.category] is a function that plucks the value we need
// mapping it over the subcategory array produces an array of salient values
const values = product.subcategories.map(subCatValue[product.category]);
acc[product.category].subcategories.push(...values)
return acc;
}, {});
const values = Object.values(index);
// go through again, removing duplicate subcategories
values.forEach(v => {
v.subcategories = Array.from(new Set(v.subcategories))
});
console.log(values);
function theAPIdata() {
return [{
"category": "e-liquid",
"subcategories": [{
"attributes": {
"name": "50ml",
"id": 19
}
},
{
"attributes": {
"name": "100ml",
"id": 18
}
},
],
},
{
"category": "e-liquid",
"subcategories": [{
"attributes": {
"name": "50ml",
"id": 19
}
},
{
"attributes": {
"name": "100ml",
"id": 18
}
},
],
},
{
"category": "e-liquid",
"subcategories": [{
"attributes": {
"name": "50ml",
"id": 19
}
}]
},
{
"category": "hardware",
"subcategories": [{
"attributes": "tanks",
"id": 15
}]
},
{
"category": "hardware",
"subcategories": [{
"attributes": "tanks",
"id": 15
},
{
"attributes": "coils",
"id": 14
}
]
}
];
}uj5u.com熱心網友回復：
試試看：
學習更多關于Set()
const obj = [{ "category":"e-liquid", "subcategories":[ { "attributes":{ "name":"50ml", "id":19 } }, { "attributes":{ "name":"100ml", "id":18 } }, ], }, { "category":"e-liquid", "subcategories":[ { "attributes":{ "name":"50ml", "id":19 } }, { "attributes":{ "name":"100ml", "id":18 } }, ], }, { "category":"e-liquid", "subcategories":[ { "attributes":{ "name":"50ml", "id":19 } } ] }, { "category":"hardware", "subcategories":[ { "attributes":"tanks", "id":15 } ] }, { "category":"hardware", "subcategories":[ { "attributes":"tanks", "id":15 }, { "attributes":"coils", "id":14 }]}];
const subCat = item => item.map(it => it.attributes.name || it.attributes);
const res = obj.reduce((a, {category, subcategories}) => {
if (a[category]) return {...a, [category]: {category, subcategories: [...new Set([...a[category].subcategories, ...subCat(subcategories)])]}}
return {...a, [category]: {category, subcategories: [...new Set([...subCat(subcategories)])]}};
},{});
console.log(Object.values(res));uj5u.com熱心網友回復：
獲取唯一的類別名稱，然后為每個類別獲取唯一的屬性名稱：
const data = [{"category":"e-liquid","subcategories":[{"attributes":{"name":"50ml","id":19}},{"attributes":{"name":"100ml","id":18}}]},{"category":"e-liquid","subcategories":[{"attributes":{"name":"50ml","id":19}},{"attributes":{"name":"100ml","id":18}}]},{"category":"e-liquid","subcategories":[{"attributes":{"name":"50ml","id":19}}]},{"category":"hardware","subcategories":[{"attributes":"tanks","id":15}]},{"category":"hardware","subcategories":[{"attributes":"tanks","id":15},{"attributes":"coils","id":14}]}];
const r = [...new Set(data.map(i=>i.category))].map(i=>({
category:i,
subcategories:[[...new Set(data.filter(({category:c})=>c===i)
.flatMap(({subcategories:s})=>s.map(({attributes:a})=>a.name??a)))]]
}));
console.log(r);轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/537857.html