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.