How to delete from JSON Object using dynamic path using JQuery or Javascript
Question
I have a JSON Object "person" and i need to delete a key "age" which should be passed as a parameter to a function as the example given below. Inside the function the statement to delete the key is added as delete person+key; but its not working. Please suggest the way to delete the key in the below manner, as i have to delete the keys dynamically on the "p" element click.
<!DOCTYPE html>
<html>
<head>
<script>
var person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
function funToDelete(key){
delete person+key;
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
}
</script>
</head>
<body>
<p id="demo"></p>
<p onclick="funToDelete('.age')">Click me</p>
</body>
</html>
5 answers
solution1
3 2019-02-14 05:19:59
Using the delete operator with square bracket notation:
const person = { firstname: "John", lastname: "Doe", age: 50, eyecolor: "blue" }; const key = 'age'; delete person[key]; console.log(person);
solution2
1 2019-02-14 05:18:55
You should use [] operator instead of +. Because you want to access a property in an Object using a variable. The code should be
delete person[key]
The square brackets notation is used to access the property of an Object using variable names or expressions.
<!DOCTYPE html>
<html>
<head>
<script>
var person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
function funToDelete(key){
delete person[key]; // This is where the key gets evaluated to a sting
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
}
</script>
</head>
<body>
<p id="demo"></p>
<p onclick="funToDelete('age')">Click me</p>
</body>
</html>
solution3
1 2019-02-14 05:20:16
Use bracket notation [] :
delete person[key];
Call just like this:
funToDelete("age");
Demonstration:
var person = { firstname: "John", lastname: "Doe", age: 50, eyecolor: "blue" }; function funToDelete(key) { delete person[key]; document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old."; }
<p id="demo"></p> <p onclick="funToDelete('age')">Click me</p>
Note - since you're removing age , the above shows undefined .
solution4
1 2019-02-14 05:20:28
When you want access key by a variable use . 。 you should delete[key]
pass only age as parameter not .key
var person = { firstname: "John", lastname: "Doe", age: 50, eyecolor: "blue" }; function funToDelete(key){ delete person[key]; document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old."; }
<p id="demo"></p> <p onclick="funToDelete('age')">Click me</p>
solution5
0 2019-02-14 05:20:35
Based on this OP comment:
I have added a simple JSON example above. But in my actual case the Object is complex and dynamic so i need to pass the object path ".category[1].additionalinfo"(just an example) to remove an element which is inside the objec
A more generic approach could be pass the key path, split() it by dot and use reduce() to get the key to delete:
var person = { firstname: "John", lastname: "Doe", age: 50, eyecolor: "blue", foo: {bar: "something"} }; function funToDelete(pathToKey) { let keys = pathToKey.split("."); let toDelete = keys.reduce((acc, key, idx, arr) => { if (idx < arr.length - 1) acc = acc[key]; return acc; }, person); delete toDelete[keys[keys.length - 1]]; console.log(person); }
<p id="demo"></p> <p onclick="funToDelete('foo.bar')">Click me</p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.