当键值为 null 时，嵌套对象从对象数组中删除

Question

我有一个这样的对象，它是一个嵌套数组，有标签和值，值可以为空（“”或空）。我已经从后端 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"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

Answer 1

您可以创建一个函数 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; }

Answer 2

可以用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);

Answer 3

@trincot 的解决方案包括一个附加项，如果没有 children，还删除空的 label 或 value。保持原始数组不变。

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>

当键值为 null 时，嵌套对象从对象数组中删除

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

javascript

arrays

multidimensional-array