Remove undefined elements from array

Question

I have a table where I pull data and add it to an array of arrays. The problems is if one of the table cells is empty it appears in the array as "undefined". I tried using an if the last element is undefined if so using .pop() the element should be removed. I still get undefined elements. Here's my code and live demo

HTML :

<table id="contactlisttable">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Phone</th>
    </tr>
    <tr>
        <td class="contactlist contactlistlastfirst">Joey</td>
        <td class="contactlist contactlisttitle">webdesigner</td>
        <td class="contactlist contactlistphone"></td>
    </tr>
    <tr>
        <td class="contactlist contactlistlastfirst">Anthony</td>
        <td class="contactlist contactlisttitle">webdesigner</td>
        <td class="contactlist contactlistphone">5555555</td>
    </tr>
</table> 

---

JavaScript :

 //IE9+ compatable solution $(function(){ var results = [], row; $('#contactlisttable').find('th, td').each(function(){ if(!this.previousElementSibling){ //New Row? row = []; results.push(row); if($(this) === 'undefined'){//Remove undefined elements row.pop(); } } row.push(this.textContent || this.innerText); //Add the values (textContent is standard while innerText is not) }); console.log(results); }); 

---

Answer 1

jsFiddle Demo

Instead of doing the conditional statements, just take advantage of your html structure. First select by the table rows, and then iterate the child td or th elements. You can also take advantage of jQuery's text instead of doing the feature detection. jQuery's text will be more reliable.

var results = [];
$('#contactlisttable tr').each(function(){
 var row = [];
 $(this).find('td,th').each(function(){
     row.push($(this).text());
 });
 results.push(row);
});
console.log(results);

Answer 2

Instead of pushing and popping if it doesn't match, don't push in the first place.

Updated from your jsfiddle:

//IE9+ compatable solution
$(function(){
    var results = [], row; 
    $('#contactlisttable').find('th, td').each(function(){
        if(!this.previousElementSibling && typeof(this) != 'undefined'){ //New Row?
            row = []; 
            results.push(row); 
        }
        row.push(this.textContent || this.innerText); //Add the values (textContent is standard while innerText is not)       
    }); 
    console.log(results); 
}); 

Answer 3

You can also avoid adding undefined (or actually empty) elements this way:

$('#contactlisttable').find('th, td').each(function(){
    if(!this.previousElementSibling){ //New Row?
        row = [];
        results.push(row);
    }
    if(!(this.textContent == '')){
        row.push(this.textContent || this.innerText);            
    }
}); 

Answer 4

To know if something is undefined dont just compare to "undefined" , use typeof().

So you want to do :

if (typeof(this) === "undefined")

Answer 5

You could add a compact method like in underscore and lodash...

Array.prototype.compact = function() {
    return this.filter(function(x){
        return x !== undefined;
    });
}

console.log([1,2, '', undefined, 'e', undefined].compact()); // [ 1, 2, '', 'e' ]

You should probably add a check for a native implementation of compact as well, since you are overriding a native prototype with this.

Or, just