delete a specific object from nested object

I am trying to remove a specific object from a nested object:

This is the original data and the function that I am using:

const allList = [
    {
        "id": "listGroup",
        "condition": "AND",
        "data": [
            {
                "id": "611901",
                "name": "1",
                "value": "1",
                "data": "6137",
                "path": "Automotive Miscellaneous>Car Rental - Personal Use>Times/Last 12 Months",
                "uniqueId": "pmds-dragdrop__61190158"
            },
            {
                "id": "listGroup_1",
                "children": {
                    "key": null,
                    "ref": null,
                    "props": {
                        "children": {
                            "type": "div",
                            "key": null,
                            "ref": null,
                            "props": {
                                "style": {
                                    "display": "flex",
                                    "boxSizing": "border-box"
                                },
                                "children": [
                                    {
                                        "type": {
                                            "propTypes": {},
                                            "defaultProps": {
                                                "id": null,
                                                "children": null,
                                                "className": null,
                                                "disabled": false,
                                                "required": false,
                                                "options": [],
                                                "multiple": false,
                                                "placeholder": null,
                                                "error": null,
                                                "onChange": null,
                                                "display": "pillBelow",
                                                "invert": false
                                            },
                                            "ComponentName": "Dropdown",
                                            "package": "@publicismedia-ds/ui-dropdown",
                                            "version": "2.1.0"
                                        },
                                        "key": null,
                                        "ref": null,
                                        "props": {
                                            "options": [
                                                {
                                                    "label": "AND",
                                                    "value": "AND"
                                                },
                                                {
                                                    "label": "OR",
                                                    "value": "OR"
                                                },
                                                {
                                                    "label": "AND NOT",
                                                    "value": "AND NOT"
                                                },
                                                {
                                                    "label": "OR NOT",
                                                    "value": "OR NOT"
                                                }
                                            ],
                                            "value": {
                                                "label": "AND",
                                                "value": "AND"
                                            },
                                            "children": " ",
                                            "id": null,
                                            "className": null,
                                            "disabled": false,
                                            "required": false,
                                            "multiple": false,
                                            "placeholder": null,
                                            "error": null,
                                            "display": "pillBelow",
                                            "invert": false
                                        },
                                        "_owner": null,
                                        "_store": {}
                                    },
                                    {
                                        "type": {
                                            "propTypes": {},
                                            "defaultProps": {
                                                "className": "",
                                                "list": null,
                                                "onChange": null,
                                                "id": "",
                                                "selectAll": false,
                                                "placeholder": "Drop keys here",
                                                "children": null,
                                                "allowDuplicates": true,
                                                "allowed": null,
                                                "notAllowed": null,
                                                "border": false,
                                                "removeDraggedItems": true,
                                                "reorder": true,
                                                "deleteItem": false,
                                                "errorMessage": "Not allowed",
                                                "onDragStart": null,
                                                "onDrop": null,
                                                "__TYPE": "DragDrop"
                                            },
                                            "componentName": "DragDrop",
                                            "package": "@publicismedia-ds/ui-drag-drop",
                                            "version": "2.2.0-beta.1"
                                        },
                                        "key": null,
                                        "ref": null,
                                        "props": {
                                            "list": {
                                                "id": "listGroup_1",
                                                "condition": "OR",
                                                "data": [
                                                    {
                                                        "id": "611908",
                                                        "name": "4",
                                                        "value": "4",
                                                        "data": "432",
                                                        "path": "Automotive Miscellaneous>Car Rental - Personal Use>Times/Last 12 Months",
                                                        "uniqueId": "pmds-dragdrop__61190834"
                                                    }
                                                ]
                                            },
                                            "id": "listGroup_1",
                                            "selectAll": false,
                                            "placeholder": "Drop keys here",
                                            "deleteItem": true,
                                            "border": true,
                                            "allowDuplicates": false,
                                            "errorMessage": "Not allowed!",
                                            "className": "",
                                            "children": null,
                                            "allowed": null,
                                            "notAllowed": null,
                                            "removeDraggedItems": true,
                                            "reorder": true,
                                            "onDragStart": null,
                                            "onDrop": null,
                                            "__TYPE": "DragDrop"
                                        },
                                        "_owner": null,
                                        "_store": {}
                                    }
                                ]
                            },
                            "_owner": null,
                            "_store": {}
                        }
                    },
                    "_owner": null,
                    "_store": {}
                },
                "uniqueId": "pmds-dragdrop__listGroup_159"
            }
        ]
    },
    {
        "id": "listGroup_1",
        "condition": "OR",
        "data": [
            {
                "id": "611908",
                "name": "4",
                "value": "4",
                "data": "432",
                "path": "Automotive Miscellaneous>Car Rental - Personal Use>Times/Last 12 Months",
                "uniqueId": "pmds-dragdrop__61190834"
            }
        ]
    }
]

console.log(allList);

function filterObject(obj, key) {
  for (var i in obj) {
    if (!obj.hasOwnProperty(i)) continue;
    if (i == key) {
      delete obj[key];
    } else if (typeof obj[i] == "object") {
      filterObject(obj[i], key);
    }
  }
  return obj;
}

console.log(filterObject(allList, "children"));

I want to delete all objects with key “children” and I am using a recursive function called “filterObject”. I have to say the function works fine.

but I would like to keep the original object too, but I don’t know how can I do that. I hope that you can help me

Answer

Your Answer

const allList = [
    {
        "id": "listGroup",
        "condition": "AND",
        "data": [
            {
                "id": "611901",
                "name": "1",
                "value": "1",
                "data": "6137",
                "path": "Automotive Miscellaneous>Car Rental - Personal Use>Times/Last 12 Months",
                "uniqueId": "pmds-dragdrop__61190158"
            },
            {
                "id": "listGroup_1",
                "children": {
                    "key": null,
                    "ref": null,
                    "props": {
                        "children": {
                            "type": "div",
                            "key": null,
                            "ref": null,
                            "props": {
                                "style": {
                                    "display": "flex",
                                    "boxSizing": "border-box"
                                },
                                "children": [
                                    {
                                        "type": {
                                            "propTypes": {},
                                            "defaultProps": {
                                                "id": null,
                                                "children": null,
                                                "className": null,
                                                "disabled": false,
                                                "required": false,
                                                "options": [],
                                                "multiple": false,
                                                "placeholder": null,
                                                "error": null,
                                                "onChange": null,
                                                "display": "pillBelow",
                                                "invert": false
                                            },
                                            "ComponentName": "Dropdown",
                                            "package": "@publicismedia-ds/ui-dropdown",
                                            "version": "2.1.0"
                                        },
                                        "key": null,
                                        "ref": null,
                                        "props": {
                                            "options": [
                                                {
                                                    "label": "AND",
                                                    "value": "AND"
                                                },
                                                {
                                                    "label": "OR",
                                                    "value": "OR"
                                                },
                                                {
                                                    "label": "AND NOT",
                                                    "value": "AND NOT"
                                                },
                                                {
                                                    "label": "OR NOT",
                                                    "value": "OR NOT"
                                                }
                                            ],
                                            "value": {
                                                "label": "AND",
                                                "value": "AND"
                                            },
                                            "children": " ",
                                            "id": null,
                                            "className": null,
                                            "disabled": false,
                                            "required": false,
                                            "multiple": false,
                                            "placeholder": null,
                                            "error": null,
                                            "display": "pillBelow",
                                            "invert": false
                                        },
                                        "_owner": null,
                                        "_store": {}
                                    },
                                    {
                                        "type": {
                                            "propTypes": {},
                                            "defaultProps": {
                                                "className": "",
                                                "list": null,
                                                "onChange": null,
                                                "id": "",
                                                "selectAll": false,
                                                "placeholder": "Drop keys here",
                                                "children": null,
                                                "allowDuplicates": true,
                                                "allowed": null,
                                                "notAllowed": null,
                                                "border": false,
                                                "removeDraggedItems": true,
                                                "reorder": true,
                                                "deleteItem": false,
                                                "errorMessage": "Not allowed",
                                                "onDragStart": null,
                                                "onDrop": null,
                                                "__TYPE": "DragDrop"
                                            },
                                            "componentName": "DragDrop",
                                            "package": "@publicismedia-ds/ui-drag-drop",
                                            "version": "2.2.0-beta.1"
                                        },
                                        "key": null,
                                        "ref": null,
                                        "props": {
                                            "list": {
                                                "id": "listGroup_1",
                                                "condition": "OR",
                                                "data": [
                                                    {
                                                        "id": "611908",
                                                        "name": "4",
                                                        "value": "4",
                                                        "data": "432",
                                                        "path": "Automotive Miscellaneous>Car Rental - Personal Use>Times/Last 12 Months",
                                                        "uniqueId": "pmds-dragdrop__61190834"
                                                    }
                                                ]
                                            },
                                            "id": "listGroup_1",
                                            "selectAll": false,
                                            "placeholder": "Drop keys here",
                                            "deleteItem": true,
                                            "border": true,
                                            "allowDuplicates": false,
                                            "errorMessage": "Not allowed!",
                                            "className": "",
                                            "children": null,
                                            "allowed": null,
                                            "notAllowed": null,
                                            "removeDraggedItems": true,
                                            "reorder": true,
                                            "onDragStart": null,
                                            "onDrop": null,
                                            "__TYPE": "DragDrop"
                                        },
                                        "_owner": null,
                                        "_store": {}
                                    }
                                ]
                            },
                            "_owner": null,
                            "_store": {}
                        }
                    },
                    "_owner": null,
                    "_store": {}
                },
                "uniqueId": "pmds-dragdrop__listGroup_159"
            }
        ]
    },
    {
        "id": "listGroup_1",
        "condition": "OR",
        "data": [
            {
                "id": "611908",
                "name": "4",
                "value": "4",
                "data": "432",
                "path": "Automotive Miscellaneous>Car Rental - Personal Use>Times/Last 12 Months",
                "uniqueId": "pmds-dragdrop__61190834"
            }
        ]
    }
]



function filterObject(obj, key) {
  for (var i in obj) {
    if (!obj.hasOwnProperty(i)) continue;
    if (i == key) {
      delete obj[key];
    } else if (typeof obj[i] == "object") {
      filterObject(obj[i], key);
    }
  }
  return obj;
}
const filtered = filterObject(JSON.parse(JSON.stringify(allList)), "children")
console.log(filtered)
console.log(allList);

What You are doing

const arr = [1,2,3];

const arr2 = arr.reverse();

console.log(arr);

console.log(arr2)

What You need

You have to copy the array not reference the array

const arr = [1,2,3];

const arr2 = [...arr].reverse();

console.log(arr);

console.log(arr2)

But in your case it’s not gonna work why

because spread operators create a shallow copy mean all the deep objects are connected between copied array and original array

Method 2

const arr = [1,2,3];

const arr2 = JSON.parse(JSON.stringify(arr)).reverse();

console.log(arr);

console.log(arr2)