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!

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);
  }
});

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.

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> 

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
    }
});