Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of delete a specific object from nested object without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
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)
We are here to answer your question about delete a specific object from nested object - If you find the proper solution, please don't forgot to share this with your team members.