Nested Object remove from an array of object when the key value is null

Question

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"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

trincot · Accepted Answer · 2021-10-29 08:03:01Z

1

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.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);

edited Oct 29, 2021 at 8:03

answered Oct 28, 2021 at 14:52

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

KooiInc Over a year ago

This will not remove empty label or value when there are no children. Try emptying the value of label for the children array with value "Tirupati"

trincot Over a year ago

@KooiInc, right! Updated to deal with that case.

KooiInc Over a year ago

See this stackblitz snippet ;)

trincot Over a year ago

If you have your own solution, then I suggest you post it as an answer. ;-) My comment would be that it is not ideal to both return a new result but at the same time risk to mutate the original.

KooiInc Over a year ago

Scratch the last question, found the answer ;)

Terry Lennox · Accepted Answer · 2021-10-28 14:42:33Z

0

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; }

edited Oct 28, 2021 at 14:42

answered Oct 28, 2021 at 14:13

Terry Lennox

30.9k5 gold badges36 silver badges45 bronze badges

2 Comments

nihar Over a year ago

Hey, it is kind of correct but, there is a children array object inside another, I only need one children object then label and value inside.

Terry Lennox Over a year ago

Ah yes, I see the issue.. I'll update shortly!

KooiInc · Accepted Answer · 2021-10-29 09:06:53Z

@trincot's solution including an addition to also remove empty label or value if there are no children. Keeps the original array intact.

See also...

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>

Please note that my solution also excludes empty properties when there are no children. This was already dealt with before you posted your solution.

Collectives™ on Stack Overflow

Nested Object remove from an array of object when the key value is null

3 Answers 3

5 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related