jQuery: create array with all unique values of a table

Question

is there a way I can create an array using jQuery / JS that contains all unique values from a table, i.e. without duplicates ? Also, the values I would be interested in are only in TDs with a certain class (myClass) + I would like to exclude "" and " " as non-valid values.

In the below example the output should be [item1,item2,item3] as the only unique and valid values.

Example table:

<table id="myTable">
    <thead>
        <tr>
            <th class="myHeader">Cat 1</th>
            <th>Vol 1</th>
            <th class="myHeader">Cat 2</th>
            <th>Vol 2</th>
            <th class="myHeader">Cat 3</th>
            <th>Vol 3</th>
            //...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="myClass">item1</td><td>8</td><td class="myClass">item2</td><td>7</td><td class="myClass">item1</td><td>2</td>
        </tr>
        <tr>
            <td class="myClass">item3</td><td>5</td><td class="myClass">item2</td><td>7</td><td class="myClass">item2</td><td>4</td>
        </tr>
        <tr>
            <td class="myClass">item3</td><td>1</td><td class="myClass">item1</td><td>5</td><td class="myClass">item3</td><td>3</td>
        </tr>
        //...
    </tbody>
</table>

My JS so far (not covering duplicates):

var result = new Array();
$('td').each(function() {
    if( ($(this).text() != '') && ($(this).text() != ' ') {
        result.push(+($(this).text()));
    }
});
alert(result);

Many thanks in advance, Tim.

Objects are well suited for this since they can only contain unique keys. — Joel Cornett, Apr 06 '14 at 15:44
Thanks. Can you explain what I have to change here ? I am pretty new to JavaScript. — user2571510, Apr 06 '14 at 15:46
See [this answer](http://stackoverflow.com/questions/9229645/remove-duplicates-from-javascript-array) to remove duplicate values from an array. — Matt, Apr 06 '14 at 15:47
Thanks, Matt. The filter solution in your link looks great. Do you know if this is also supported in IE8 ? — user2571510, Apr 06 '14 at 15:53

score 2 · Accepted Answer · answered Apr 06 '14 at 15:46

2

Try this

var result = new Array();
$('td').each(function() {
    if( ($(this).text() != '') && ($(this).text() != ' ') {
        if(result.indexOf($(this).text()) == -1){
            result.push(+($(this).text()));
        }
    }
});
alert(result);

answered Apr 06 '14 at 15:46

smistry

1,127
1
9
9

I think I'll go with this one as it seems to work in all browsers. If I would like to consider only TDs with a certain class would I just say $('td.myClass')... ? – user2571510 Apr 06 '14 at 15:57
Thanks. Using td.myClass only returns NaN for all the values. – user2571510 Apr 06 '14 at 16:08
Ok, I got this to work. I had to change the result.push line as follows: result.push( $(this).text() ); – user2571510 Apr 06 '14 at 16:20

score 2 · Answer 2 · answered Apr 06 '14 at 16:06

2

You can use $.unique() after:

result = $.unique(result);

or check beforehand:

if(result.indexOf(this.textContent) == -1){
    //push
}

answered Apr 06 '14 at 16:06

Wilmer

2,511
1
14
8

Thanks for this. Is $.unique supported in IE8 and IE9 ? – user2571510 Apr 06 '14 at 16:07
1

Yes if you use jquery 1.x, can't guarantee with 2.x onwards haven't tested. – Wilmer Apr 06 '14 at 16:10
Thanks. I tested this but it does not remove the duplicates in my case. – user2571510 Apr 06 '14 at 16:19
That's odd did you do it after the each()? – Wilmer Apr 06 '14 at 16:31

Jai · Answer 3 · 2014-04-06T16:11:23.150

You can do this:

var result = new Array();

$('#myTable').find('td.myClass').each(function () {
   if (result.indexOf($(this).text()) == -1) {
       result.push($.trim($(this).text()));
   }
});
console.log(result);

Fiddle

With $.inArray():

var result = [];

$('#myTable').find('td.myClass').each(function () {
   if ($.inArray($(this).text(), result) == -1) {
      result.push($.trim($(this).text()));
   }
});
console.log(result);

jQuery: create array with all unique values of a table

3 Answers3

Fiddle

With jQuery.inArray()