I have an object which is like this, it a nested array which has labels and values, and values can empty("" or null). I have created this object from the backend API response.
[
{
"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"
}
]
}
]
}
]
}
]
}
]
Now in this nested array of object there is an object which value as "", I want to remove that object but keep the rest of the object.
Similarly, the value:"" can be anywhere in the nested object.
So the updated object should look like this:
[
{
"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"
}
]
}
]
}
]
}
]
}
]
CodePudding user response：
You can use flatMap to get the effect that the next level of children is expanded into the current children array:
const clean = data =>
data.flatMap(item =>
!item.children ? item
: item.value && item.label ? {...item, children: clean(item.children) }
: clean(item.children)
);
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);CodePudding user response：
You can create a function removeEmptyValues() to remove any empty properties from an object.
This would be called recursively on any child objects to remove empty values from the whole tree.
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; }