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

What would you like to go in the array is the field is undefined? — Jivings
– Jivings, Commented Dec 23, 2013 at 15:44
This would also remove the "sparse" aspect of the array. Why not just use an object at that point? — Travis J
– Travis J, Commented Dec 23, 2013 at 15:46

Travis J · Accepted Answer · 2013-12-23 15:59:10Z

2

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

answered Dec 23, 2013 at 15:59

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cookie monster Over a year ago

+1 An inner loop makes far more sense. Could use .map() to create the Arrays too, though you'd need to work around jQuery's auto-flattening for the inner .map().

Matt Williamson · Accepted Answer · 2013-12-23 15:47:48Z

1

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

answered Dec 23, 2013 at 15:47

Matt Williamson

40.3k10 gold badges67 silver badges73 bronze badges

Comments

Julio · Accepted Answer · 2013-12-23 16:00:55Z

1

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

answered Dec 23, 2013 at 16:00

Julio

4014 silver badges15 bronze badges

1 Comment

Julio Over a year ago

Travis J's answers is far more appropriate for this case.

Yabada · Accepted Answer · 2013-12-23 15:46:04Z

0

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

So you want to do :

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

answered Dec 23, 2013 at 15:46

Yabada

1,7581 gold badge16 silver badges36 bronze badges

5 Comments

Travis J Over a year ago

That will never be true because you are constructing a jQuery object. The object will never return undefined as its type. I didn't downvote though, just pointing it out.

Yabada Over a year ago

Indeed, just whent too fast. Corrected.

canon Over a year ago

typeof isn't a function. You don't neeed the parens.

Yabada Over a year ago

It avoid bleeding eyes.

canon Over a year ago

@EoiFirst do you do the same thing with return, i.e.: return(true)? Making non-function keywords look like function calls makes my eyes bleed. ;)

brbcoding · Accepted Answer · 2013-12-23 16:26:27Z

0

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

edited Dec 23, 2013 at 16:26

answered Dec 23, 2013 at 15:59

brbcoding

13.7k2 gold badges39 silver badges51 bronze badges

2 Comments

cookie monster Over a year ago

Why put compact() on Function.prototype if it's only meant to work with Arrays?

brbcoding Over a year ago

My bad, early morning :P... Updated.

Collectives™ on Stack Overflow

Remove undefined elements from array

5 Answers 5

1 Comment

Comments

1 Comment

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related