Removing object from nested json array jquery (splice)

Question

I have this JSON Object:

{
   "Videotheck":[
      {
         "Category":"Comedy",
         "Title_Liste":[
            {
               "Title":"Millers",
               "Year":"2014"
            },
            {
               "Title":"Yogi",
               "Year":"2012"
            }
         ]
      },
      {
         "Category":"Accion",
         "Title_Liste":[
            {
               "Title":"Rodulf",
               "Year":"2014"
            },
            {
               "Title":"Matrix",
               "Year":"2000"
            }
         ]
      }
   ]
}

I try to delete a Object (item) from the title list in a category. For this the function splice from Javascript is used. The procedure is working good but only for the last object in the title list of a category. When a object in the middle of the list is deleted a strange notification in the console appears. The object is anyway deleted from the array.

The code looks like this:

$.each(VT.Videotheck,function(k,v){
    if(v.Category == 'Comedy'){
        $.each(v.Title_Liste,function(b,z){
            if(z.Title == 'Millers'){
                v.Title_Liste.splice(b,1);
            }
        });
    }
});

The notification in console is:

TypeError: z is undefined

And only appears when a object with not last possition want to be deleted. Any idea why this error appears

Answer 1

Following up on @Tokn's answer. Here's how you should filter your array:

var VT = {
  "Videotheck": [{
    "Category": "Comedy",
    "Title_Liste": [{
      "Title": "Millers",
      "Year": "2014"
    }, {
      "Title": "Yogi",
      "Year": "2012"
    }]
  }, {
    "Category": "Accion",
    "Title_Liste": [{
      "Title": "Rodulf",
      "Year": "2014"
    }, {
      "Title": "Matrix",
      "Year": "2000"
    }]
  }]
}

var VT2 = {
  "Videotheck": [{
    "Category": "Comedy",
    "Title_Liste": [{
      "Title": "Millers",
      "Year": "2014"
    }, {
      "Title": "Yogi",
      "Year": "2012"
    }]
  }, {
    "Category": "Accion",
    "Title_Liste": [{
      "Title": "Rodulf",
      "Year": "2014"
    }, {
      "Title": "Matrix",
      "Year": "2000"
    }]
  }]
}

// Example #1: Using native loops is always better..
for ( var i = 0, l = VT.Videotheck.length; i < l; i++ ) {
    var property = VT.Videotheck[i];

    if ( property.Category === "Comedy" ) {
    var dirtyArray = property.Title_Liste;
    var filteredArray = [],
        ii = 0,
        ll = dirtyArray.length;

        for (; ii < ll; ii++) {
            var movie = dirtyArray[ii];

            if ( movie.Title !== "Millers" ) {
            filteredArray.push( movie );
          }
        }

    property.Title_Liste = filteredArray;    
  }
}

// Example #2: es5 methods / loops
VT2.Videotheck.forEach( function( element ) {
    if ( element.Category === "Comedy" ) {
    element.Title_Liste = element.Title_Liste.filter( function( movie ) {
        return movie.Title !== "Millers";
    } )
  }
} );

jsFiddle: https://jsfiddle.net/yj4a1rsy/

Answer 2

It looks to me like you're removing items from the array while you're still looping through it in your $.each loop.

You need to store a reference to the item(s) you want to delete and splice them after you're finished looping.