Remove an object from array

Question

am trying to remove an object from an Array list within a JavaScript object.

The Structure if the Object:

{
 "temp": {
 "name": "",
 "css": {
 "bg_color_main": "#xxxxx",
 "part_bg_color": "xxxxx",
 "txt_font_family": "xxxxxxxx",
 "txt_font_color_main": "#xxxxx",
 "headline_font_family": "xxxxx",
 },
 "part": [
 {
 "name": "xxxxxx",
 "style": {}
 },
 {
 "name": "yyyyyy",
 "style": {}
 },
 {
 "name": "zzzzzz",
 "style": {}
 }
 ]
 }
}

The Code:

$.each(jsonData.temp.part, function(k, v) {
 var tt = this; //var tt = $(this)
 if( v.name === partName ){
 delete tt[k];
 }
});

Nothing happens.. no error, no warning!

• simbabque: What's the value of partName?
• simbabque: Related: stackoverflow.com/questions/500606/…
• k.vincent: Sorry, here it is: var partName= $(this).prev().attr('name'); should be equal to the value of the key: 'name' In this case: "xxxxxx" or: "yyyyyy"
• simbabque: You can edit your question with the edit link under the tags. :) But still that doesn't answer my question of what the actual value is you are putting in. If you put "aaaaaa" in it will never do anything because there is no such name in your data structure.
• k.vincent: The current/actual value of partName is: "xxxxxx". so I want to remove the first object with the name: "xxxxxx". thx!

Answer 1

There are two problems in your code. First, delete does not remove elements. It only sets them to undefined. Use splice instead.

Second, it never gets to do that, because tt (or this) is the object inside the array that you are currently working on, not the array you are iterating. You need to access the array explicitly with its full name.

$.each(jsonData.temp.part, function(k, v) {
 var tt = this; //var tt = $(this)
 if( v.name === partName ){
 jsonData.temp.part.splice(k,1);
 }
});

• k.vincent: Thx! that's it. I missed this. you're right. tt and/or this was not referring to the element I want to get.

Answer 2

Alternatively you could simply use a filter.

var o = {
 "temp": {
 "name": "",
 "css": {
 "bg_color_main": "#xxxxx",
 "part_bg_color": "xxxxx",
 "txt_font_family": "xxxxxxxx",
 "txt_font_color_main": "#xxxxx",
 "headline_font_family": "xxxxx",
 },
 "part": [
 {
 "name": "xxxxxx",
 "style": {}
 },
 {
 "name": "yyyyyy",
 "style": {}
 },
 {
 "name": "zzzzzz",
 "style": {}
 }
 ]
 }
}
o.temp.part = o.temp.part.filter(function (element) {return element.name !== "zzzzzz"});

Answer 3

You could use different approach, for example:

If the reference of the array is not needed, you can use reduce to create a new array:

jsonData.temp.part = jsonData.temp.part.reduce(function(acc, value) {
 if( value.name !== partName ){
 acc.push(value);
 }
 return acc;
}, []);

Also you can find the index of the element, and use splice to mantain the reference:

var indexElement = jsonData.temp.part.reduce(function(acc, value, index) {
 if( value.name !== partName ){
 return index;
 }
 return acc;
}, -1);
jsonData.temp.part.splice(indexElement, 1)

Both ways work.

• k.vincent: Hi Quintana, Thx! the index of the element is: k. the suggestion with: splice did solve the issue.

Answer 4

Here is a possible solution:

The simplest way is to use delete.

var jsonData = {
 "temp": {
 "name": "",
 "css": {
 "bg_color_main": "#xxxxx",
 "part_bg_color": "xxxxx",
 "txt_font_family": "xxxxxxxx",
 "txt_font_color_main": "#xxxxx",
 "headline_font_family": "xxxxx",
 },
 "part": [
 {
 "name": "xxxxxx",
 "style": {}
 },
 {
 "name": "yyyyyy",
 "style": {}
 },
 {
 "name": "zzzzzz",
 "style": {}
 }
 ]
 }
}
var nameToRemove = 'xxxxxx';
var parts = jsonData.temp.part;
$.each(parts, function(k, v) {
 
 if (v.name === nameToRemove)
 { 
 delete parts[k];
 }
 
});
//this code is added to just show the result
$.each(parts, function(i, r){
 
 if (r != undefined)
 {
 $('#result').append(r.name + ',')
 }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="result"></label>

• k.vincent: @Jaya: Very useful & clean code snippet.. Thx! also working fine.

Answer 5

You created a copy and delete item from the copy.

$.each(jsonData.temp.part, function(k, v) {
 var tt = this; // now you created a new array!!!
 if( v.name === partName ){
 delete tt[k]; // here you delete the item from the copy array
 delete this[k]; // you remove item from the original array
 }
});