我有一個從 API 回應中獲得的物件陣列，并希望對其進行格式化，以便它可以用于帶有嵌套專案的選單。
[
{
"id": 1,
"name": "The Cool Association",
"description": "the office",
"country": "United Kingdom",
"county": "North Lanarkshire",
"town": "Airdrie",
"address": "test addr 1",
"postcode": null,
"latlong": {
"x": -3.97369,
"y": 55.8665
},
"mainCategory": Hills,
"subCategory": 17,
"refCode": "airdrie"
},
{
"id": 2,
"name": "Test Locations",
"description": "testing",
"country": "United Kingdom",
"county": "Aberdeenshire",
"town": "Airdrie",
"address": "test addr 1",
"postcode": null,
"latlong": {
"x": -4.02652,
"y": 55.8611
},
"mainCategory": Mountains,
"subCategory": null,
"refCode": "coat"
},
{
"id": 3,
"name": "Test Locations",
"description": "testing",
"country": "Scotland",
"county": "North Lanarkshire",
"town": "Airdrie",
"address": "test addr 1",
"postcode": null,
"latlong": {
"x": -4.02652,
"y": 55.8611
},
"mainCategory": Main Category,
"subCategory": null,
"refCode": "test"
},
{
"id": 4,
"name": "NL Leisure",
"description": "leisure",
"country": "United Kingdom",
"county": "North Lanarkshire",
"town": "Airdrie",
"address": "test addr 1",
"postcode": null,
"latlong": {
"x": -4.02652,
"y": 55.8611
},
"mainCategory": Sports,
"subCategory": null,
"refCode": "hello"
}
]
我希望首先按國家/地區對回應進行分組，然后按縣在國家內分組，然后按主要類別在縣內分組。這可能嗎？
[
"Scotland":{
"North Lanarkshire":{
"MainCategory":{
"...details"
}
}
},
"UnitedKingdom":{
"North Lanarkshire":{
"Hills":{
"...details"
},
"Sports":{
"...details"
}
},
"Aberdeenshire":{
"Mountains":{
"...details"
}
}
}
]
我已經嘗試了各種減少方式并使用了_.groupBylodash 提供的功能，但未能最終得到我正在尋找的格式。在 API 級別對其進行格式化會更好嗎？任何幫助表示贊賞
uj5u.com熱心網友回復：
const arr = [{
"id": 1,
"name": "The Cool Association",
"description": "the office",
"country": "United Kingdom",
"county": "North Lanarkshire",
"town": "Airdrie",
"address": "test addr 1",
"postcode": null,
"latlong": {
"x": -3.97369,
"y": 55.8665
},
"mainCategory": 'Hills',
"subCategory": 17,
"refCode": "airdrie"
},
{
"id": 2,
"name": "Test Locations",
"description": "testing",
"country": "United Kingdom",
"county": "Aberdeenshire",
"town": "Airdrie",
"address": "test addr 1",
"postcode": null,
"latlong": {
"x": -4.02652,
"y": 55.8611
},
"mainCategory": 'Mountains',
"subCategory": null,
"refCode": "coat"
},
{
"id": 3,
"name": "Test Locations",
"description": "testing",
"country": "Scotland",
"county": "North Lanarkshire",
"town": "Airdrie",
"address": "test addr 1",
"postcode": null,
"latlong": {
"x": -4.02652,
"y": 55.8611
},
"mainCategory": 'Main Category',
"subCategory": null,
"refCode": "test"
},
{
"id": 4,
"name": "NL Leisure",
"description": "leisure",
"country": "United Kingdom",
"county": "North Lanarkshire",
"town": "Airdrie",
"address": "test addr 1",
"postcode": null,
"latlong": {
"x": -4.02652,
"y": 55.8611
},
"mainCategory": 'Sports',
"subCategory": null,
"refCode": "hello"
}
]
const result = arr.reduce((acc, curr) => {
const country = acc[curr.country] || {};
const county = country[curr.county] || {};
const mainCategory = county[curr.mainCategory] || {};
mainCategory[curr.name] = curr;
county[curr.mainCategory] = mainCategory;
country[curr.county] = county;
acc[curr.country] = country;
return acc;
}, {});
console.log(JSON.stringify(result, null, 2));uj5u.com熱心網友回復：
使用Array#reduce：
const arr = [
{ "id": 1, "name": "The Cool Association", "description": "the office", "country": "United Kingdom", "county": "North Lanarkshire", "town": "Airdrie", "address": "test addr 1", "postcode": null, "latlong": { "x": -3.97369, "y": 55.8665 }, "mainCategory": "Hills", "subCategory": 17, "refCode": "airdrie" },
{ "id": 2, "name": "Test Locations", "description": "testing", "country": "United Kingdom", "county": "Aberdeenshire", "town": "Airdrie", "address": "test addr 1", "postcode": null, "latlong": { "x": -4.02652, "y": 55.8611 }, "mainCategory": "Mountains", "subCategory": null, "refCode": "coat" },
{ "id": 3, "name": "Test Locations", "description": "testing", "country": "Scotland", "county": "North Lanarkshire", "town": "Airdrie", "address": "test addr 1", "postcode": null, "latlong": { "x": -4.02652, "y": 55.8611 }, "mainCategory": "Main Category", "subCategory": null, "refCode": "test" },
{ "id": 4, "name": "NL Leisure", "description": "leisure", "country": "United Kingdom", "county": "North Lanarkshire", "town": "Airdrie", "address": "test addr 1", "postcode": null, "latlong": { "x": -4.02652, "y": 55.8611 }, "mainCategory": "Sports", "subCategory": null, "refCode": "hello" }
];
const res = arr.reduce((acc, { country, county, mainCategory, ...e }) => ({
...acc,
[country]: {
...(acc[country] ?? {}),
[county]: {
...(acc[country]?.[county] ?? {}),
[mainCategory]: e
}
}
}), {});
console.log(res);轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/435189.html
標籤：javascript 数组 反应 json 目的