Get all values from column without duplicates in JavaScript / jQuery

Question

I would like to create a select dropdown that contains all values from a column with each value only appearing once.

Is there a way to achieve this in JavaScript or jQuery assuming I have a basic HTML table and the column in question is columnA ?

Azine

And what exactly does a column look like ? – Forever

possible duplicate of Unique values in an array – Largehearted

Answer 1

You'd have to some checking to be sure you haven't already included a column, something like:

function makeSelectFromColumn() {
    var arr = [];
    $("td:first").each(function() {
        if ($.inArray($(this).text(), arr) == -1)
            arr.push($(this).text());
    });

    //Create your select
    var select = $("<select />");
    for (var i = 0; i < arr.length; i++) {
        $("<option>" + arr[i] + "</option>").appendTo(select);
    }

    select.appendTo("body"); //append where you need
}

Travers

Answer 2

With plain js (no library): live demo here (click).

var colA = document.querySelectorAll('td:first-child'); //select the column you want

var used = []; //to check for used values
var frag = document.createDocumentFragment(); //add option elements to this
for (var i=0; i<colA.length; ++i) { //for each item in the column
  var text = colA[i].textContent; //get the text from the item
  if (used.indexOf(text) == -1) { //if the text isn't already used
    used.push(text); //store the text as used
    var option = document.createElement('option'); //create option
    option.textContent = text;
    frag.appendChild(option); //add option to frag
  }
}

var select = document.createElement('select'); //create select
select.appendChild(frag); //add options to select

document.body.appendChild(select); //put the select somewhere on the page

html:

<table>
  <tbody>
    <tr><td>Col A Val1</td></tr>
    <tr><td>Col A Val2</td></tr>
    <tr><td>Col A Val3</td></tr>
    <tr><td>Col A Val1</td></tr>
    <tr><td>Col A Val2</td></tr>
    <tr><td>Col A Val3</td></tr>
  </tbody>
</table>

Pulsate

Thanks a lot - this is great too ! I'll try both and see which one works better. – Azine

@Azine both work fine, but there's no reason to use jQuery just for this. If you're already using jQuery, you might as well use the jQuery solution. If you're not using jQuery, use my approach. Generally, I think it is better to give answers that don't use a library if possible. – Pulsate

Answer 3

function getNthColumn(n) {

   var data = [],
       i,
       yourSelect,
       unique;

   $("#yourTable tr td:nth-child("+n+")").each(function () {
        data.push($(this).text());           
   });

   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
   // Use this function if your table is not large as the time complexity is O(n^2)
   unique = data.filter(function(item, i, arr) {
       return i == arr.indexOf(item);
   });

   yourSelect = $('#yourSelect');
   for (i = 0; i < unique.length; i += 1) {
        yourSelect.append("<option>"+unique[i]+"</option>");
   }
}

http://jsfiddle.net/xaum3/2/

Ganof

Answer 4

Plain Javascript, ES6, easy:

const cells = [].slice.call(table.querySelectorAll('td.mycell')) //using slice to convert nodelist to array
const values = cells.map(cell => cell.textContent)
const distinct = [...new Set(values)]

Se

Answer 5

Responding to

Plain Javascript, ES6, easy:

It could be also like this:

 let cells = document.querySelectorAll("td.mycell");
 const values = [...cells].map((cell) => cell.textContent);
 const distinct= [...new Set(values)];

Internationalism