CODEWITHSUNDEEP
javascriptjqueryjson
k.vincent
k.vincent

Reputation: 4133

Remove an object from array

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!

Upvotes: 1

Views: 124

Answers (5)

netdjw
netdjw

Reputation: 5997

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

Upvotes: 0

JGV
JGV

Reputation: 5187

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>

Upvotes: 0

Jes&#250;s Quintana
Jes&#250;s Quintana

Reputation: 1813

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.

Upvotes: 0

Etheryte
Etheryte

Reputation: 25310

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

Upvotes: 1

simbabque
simbabque

Reputation: 54323

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

Upvotes: 3

Related Questions