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!

Related: http://stackoverflow.com/questions/500606/javascript-array-delete-elements — simbabque, Sep 07 '15 at 19:12
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" — k.vincent, Sep 07 '15 at 19:13
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. — simbabque, Sep 07 '15 at 19:15
The current/actual value of partName is: "xxxxxx". so I want to remove the first object with the name: "xxxxxx". thx! — k.vincent, Sep 07 '15 at 19:20

score 3 · Answer 1 · edited May 23 '17 at 11:58

3

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

edited May 23 '17 at 11:58

Community

1
1

answered Sep 07 '15 at 19:21

simbabque

53,749
8
73
136

Thx! that's it. I missed this. you're right. tt and/or this was not referring to the element I want to get. – k.vincent Sep 07 '15 at 19:31

score 1 · Answer 2 · answered Sep 07 '15 at 19:24

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

score 0 · Answer 3 · answered Sep 07 '15 at 19:25

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.

Hi Quintana, Thx! the index of the element is: k. the suggestion with: splice did solve the issue. — k.vincent, Sep 07 '15 at 19:34

score 0 · Answer 4 · answered Sep 07 '15 at 19:32

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>

@Jaya: Very useful & clean code snippet.. Thx! also working fine. — k.vincent, Sep 07 '15 at 20:05

score 0 · Answer 5 · answered Sep 07 '15 at 19:51

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

Remove an object from array

5 Answers5