How to handle empty objects with jQuery .each()?

Question

I'm running into trouble an array in an array is empty.

I got two arrays which I push into a new one, so I can use jQuery .each() with the new array. The new array can have different states:

contain empty arrays:

nextEvent = [[ ], [ ]]

contain two full arrays which contain one object each:

nextEvent = [[object], [object]]

or contain one full array with one object:

nextEvent = [[object], [ ]]
nextEvent = [[ ], [object]]

Now I'm trying to use .each() on nextEvent, in order to append the existing objects data to an element.

So far i got a function which looks like this:

$.each(nextEvent, function(i, n){           
    if (nextFeedingTime || nextShowTime){                       
        var time = n[0].Time.toString();                
        //...
        if (nextFeedingTime && nextShowTime){
            if (n[0].Kategorie === "Fütterung"){
                appendFeeding();                    
            } else {                        
                appendShow();               
            }
        } else if (nextFeedingTime && !nextShowTime){                   
            appendFeeding();
        } else if (!nextFeedingTime && nextShowTime){
            appendShow();
        }
    } else {
        //...
   }    
});

Note: nextFeedingTime and nextShowTime are the arrays i originally pushed into nextEvent

This function is working, but as soon as one array is empty I get an n[0] is undefined error. Any Ideas how to fix this?

Answer 1

add this:

if(n[0] !== undefined)

check for the undefined check and proceed.

Answer 2

simpler way without checking for 'undefined'

if(!n[0]){ }