我有一個這樣的物件，它是一個嵌套陣列，其中包含標簽和值，并且值可以為空（"" 或 null）。我從后端 API 回應創建了這個物件。
[
{
"label": "United States",
"value": "United States",
"children": [
{
"label": "Texas",
"value": "Texas",
"children": [
{
"label": "Galveston County",
"value": "Galveston County",
"children": [
{
"label": "", // to be removed
"value": "", // to be removed
"children": [
{
"label": "Texas City",
"value": "Texas City"
}
]
}
]
}
]
}
]
},
{
"label": "India",
"value": "India",
"children": [
{
"label": "Karnataka",
"value": "Karnataka",
"children": [
{
"label": "Bengaluru Urban District",
"value": "Bengaluru Urban District",
"children": [
{
"label": "Bengaluru South",
"value": "Bengaluru South",
"children": [
{
"label": "Bengaluru",
"value": "Bengaluru"
}
]
}
]
}
]
},
{
"label": "Meghalaya",
"value": "Meghalaya",
"children": [
{
"label": "South West Garo Hills District",
"value": "South West Garo Hills District",
"children": [
{
"label": "Betasing",
"value": "Betasing",
"children": [
{
"label": "Kebolpara",
"value": "Kebolpara"
}
]
}
]
}
]
},
{
"label": "Andhra Pradesh",
"value": "Andhra Pradesh",
"children": [
{
"label": "Chittoor District",
"value": "Chittoor District",
"children": [
{
"label": "Yerpedu",
"value": "Yerpedu",
"children": [
{
"label": "Tirupati",
"value": "Tirupati"
}
]
}
]
}
]
}
]
}
]
現在在這個嵌套的物件陣列中有一個值為“”的物件，我想洗掉該物件但保留物件的其余部分。
同樣，值："" 可以在嵌套物件中的任何位置。
所以更新后的物件應該是這樣的：
[
{
"label": "United States",
"value": "United States",
"children": [
{
"label": "Texas",
"value": "Texas",
"children": [
{
"label": "Galveston County",
"value": "Galveston County",
"children": [
{
"label": "Texas City",
"value": "Texas City"
}
]
}
]
}
]
},
{
"label": "India",
"value": "India",
"children": [
{
"label": "Karnataka",
"value": "Karnataka",
"children": [
{
"label": "Bengaluru Urban District",
"value": "Bengaluru Urban District",
"children": [
{
"label": "Bengaluru South",
"value": "Bengaluru South",
"children": [
{
"label": "Bengaluru",
"value": "Bengaluru"
}
]
}
]
}
]
},
{
"label": "Meghalaya",
"value": "Meghalaya",
"children": [
{
"label": "South West Garo Hills District",
"value": "South West Garo Hills District",
"children": [
{
"label": "Betasing",
"value": "Betasing",
"children": [
{
"label": "Kebolpara",
"value": "Kebolpara"
}
]
}
]
}
]
},
{
"label": "Andhra Pradesh",
"value": "Andhra Pradesh",
"children": [
{
"label": "Chittoor District",
"value": "Chittoor District",
"children": [
{
"label": "Yerpedu",
"value": "Yerpedu",
"children": [
{
"label": "Tirupati",
"value": "Tirupati"
}
]
}
]
}
]
}
]
}
]
uj5u.com熱心網友回復：
可以使用flatMap得到下一層children展開為當前children陣列的效果：
const clean = data =>
data.flatMap(item =>
!item.value && !item.label ? clean(item?.children ?? [])
: item.children ? {...item, children: clean(item.children) }
: item
);
const response = [{"label": "United States","value": "United States","children": [{"label": "Texas","value": "Texas","children": [{"label": "Galveston County","value": "Galveston County","children": [{"label": "","value": "","children": [{"label": "Texas City","value": "Texas City"}]}]}]}]},{"label": "India","value": "India","children": [{"label": "Karnataka","value": "Karnataka","children": [{"label": "Bengaluru Urban District","value": "Bengaluru Urban District","children": [{"label": "Bengaluru South","value": "Bengaluru South","children": [{"label": "Bengaluru","value": "Bengaluru"}]}]}]},{"label": "Meghalaya","value": "Meghalaya","children": [{"label": "South West Garo Hills District","value": "South West Garo Hills District","children": [{"label": "Betasing","value": "Betasing","children": [{"label": "Kebolpara","value": "Kebolpara"}]}]}]},{"label": "Andhra Pradesh","value": "Andhra Pradesh","children": [{"label": "Chittoor District","value": "Chittoor District","children": [{"label": "Yerpedu","value": "Yerpedu","children": [{"label": "Tirupati","value": "Tirupati"}]}]}]}]}];
const result = clean(response);
console.log(result);uj5u.com熱心網友回復：
您可以創建一個函式removeEmptyValues()來從物件中洗掉任何空屬性。這將在任何子物件上遞回呼叫以從整個樹中洗掉空值。
let input = [ { "label": "United States", "value": "United States", "children": [ { "label": "Texas", "value": "Texas", "children": [ { "label": "Galveston County", "value": "Galveston County", "children": [ { "label": "", "value": "", "children": [ { "label": "Texas City", "value": "Texas City" } ] } ] } ] } ] }, { "label": "India", "value": "India", "children": [ { "label": "Karnataka", "value": "Karnataka", "children": [ { "label": "Bengaluru Urban District", "value": "Bengaluru Urban District", "children": [ { "label": "Bengaluru South", "value": "Bengaluru South", "children": [ { "label": "Bengaluru", "value": "Bengaluru" } ] } ] } ] }, { "label": "Meghalaya", "value": "Meghalaya", "children": [ { "label": "South West Garo Hills District", "value": "South West Garo Hills District", "children": [ { "label": "Betasing", "value": "Betasing", "children": [ { "label": "Kebolpara", "value": "Kebolpara" } ] } ] } ] }, { "label": "Andhra Pradesh", "value": "Andhra Pradesh", "children": [ { "label": "Chittoor District", "value": "Chittoor District", "children": [ { "label": "Yerpedu", "value": "Yerpedu", "children": [ { "label": "Tirupati", "value": "Tirupati" } ] } ] } ] } ] } ]
function removeEmptyValues(obj) {
let removeChildren = false;
for(let k in obj) {
if ((obj[k] === '') || (obj[k] === null)) {
delete obj[k];
obj[k] = obj.children[0][k];
removeChildren = true;
} else if (typeof(obj[k]) === 'object') {
removeEmptyValues(obj[k]);
}
}
if (removeChildren) delete obj.children;
return obj;
}
console.log(removeEmptyValues(input)).as-console-wrapper { max-height: 100% !important; top: 0; }uj5u.com熱心網友回復：
@trincot 的解決方案包括一個附加項，以洗掉空的label或者value如果沒有children. 保持原始陣列不變。
另見...
const clean = data =>
data.flatMap((item) => {
let cleanItem;
if (!item.children) {
cleanItem = {...item};
!cleanItem.label && delete cleanItem.label;
!cleanItem.value && delete cleanItem.value;
}
return !item.children
? cleanItem : item.value && item.label
? { ...item, children: clean(item.children) } : clean(item.children);
});
const data = getData();
const cleaned = clean([...data]);
document.querySelector(`pre`).textContent = JSON.stringify(cleaned, null, 2);
function getData() {
return [
{
label: 'United States',
value: 'United States',
children: [
{
label: 'Texas',
value: 'Texas',
children: [
{
label: 'Galveston County',
value: 'Galveston County',
children: [
{
label: '', // to be removed
value: '', // to be removed
children: [
{
label: 'Texas City',
value: 'Texas City',
},
],
},
],
},
],
},
],
},
{
label: 'India',
value: 'India',
children: [
{
label: 'Karnataka',
value: 'Karnataka',
children: [
{
label: 'Bengaluru Urban District',
value: 'Bengaluru Urban District',
children: [
{
label: 'Bengaluru South',
value: 'Bengaluru South',
children: [
{
label: 'Bengaluru',
value: 'Bengaluru',
},
],
},
],
},
],
},
{
label: 'Meghalaya',
value: 'Meghalaya',
children: [
{
label: 'South West Garo Hills District',
value: 'South West Garo Hills District',
children: [
{
label: 'Betasing',
value: 'Betasing',
children: [
{
label: 'Kebolpara',
value: 'Kebolpara',
},
],
},
],
},
],
},
{
label: 'Andhra Pradesh',
value: 'Andhra Pradesh',
children: [
{
label: 'Chittoor District',
value: 'Chittoor District',
children: [
{
label: 'Yerpedu',
value: 'Yerpedu',
children: [
{
label: 'Tirupati',
value: '',
},
],
},
],
},
],
},
],
},
];
}<pre></pre>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/341265.html
標籤：javascript 数组 多维数组
上一篇：如何每秒更新一個字串串列？