javascript putting multiple distinct id into array

Question

I have a table

<table id='mytable'>
<tr>
  <th> Cars </th>
  <th> Food </th>
  <th> clothes</th>
</tr>
<tr>
  <td> 1 </td>
  <td> yes </td>
  <td> jeans </td>
</tr>
<tr>
  <td> 1 </td>
  <td> yes </td>
  <td> jeans </td>
</tr>
<tr>
  <td> 84 </td>
  <td> no </td>
  <td> shirt </td>
</tr>
<tr>
  <td> 4984 </td>
  <td> yes </td>
  <td> hat </td>
</tr>

I have a javascript function that takes the first td and get the value, but it only takes the first value in this case 1. I want to take all of the first columns distinct values and store it in an array. so the end result should be

$firstColumnArray = [1,84, 4984]

My function looks like

$(document).ready(function()
{
$one = document.getElementById("table");
$two = $(this).find("td").eq(0).text()
alert($two);
});

How can i loop though the entire contents of the tables first row and store it in a variable?

You want to iterate all the td elements of the first row? Or iterate all the rows and grab the value of the first column? Because your end result example would indicate you want to do the latter. Since you are using JQuery, I would suggest using .each() to iterate each row, then do your find("td").eq(0) — Ryan Wilson
– Ryan Wilson, Commented Feb 1, 2018 at 20:29

gmoniava · Accepted Answer · 2018-02-01 20:44:02Z

1

You need to iterate over all rows

let res = [];
$('#mytable tr').each(function() {
    if(!$(this).find('td:first').length) return;
    var customerId = $(this).find("td").eq(0).text();   
    res.push(customerId); 
});

then filter out duplicates.

let finalRes = res.filter( function (value, index, self) { 
    return self.indexOf(value) === index;
});

edited Feb 1, 2018 at 20:44

answered Feb 1, 2018 at 20:33

gmoniava

28.9k9 gold badges61 silver badges103 bronze badges

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

Comments

Ele · Accepted Answer · 2018-02-01 20:38:33Z

You can use this selector "tr > td:first-child"

$(document).ready(function() {
  var values = []; 
  $('#mytable').find("tr > td:first-child").each(function() {
    var value = $(this).html().trim();
    if (!values.includes(value)) 
      values.push(value);      
  });
  
  console.log(values);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='mytable'>
  <tr>
    <th> Cars </th>
    <th> Food </th>
    <th> clothes</th>
  </tr>
  <tr>
    <td> 1 </td>
    <td> yes </td>
    <td> jeans </td>
  </tr>
  <tr>
    <td> 1 </td>
    <td> yes </td>
    <td> jeans </td>
  </tr>
  <tr>
    <td> 84 </td>
    <td> no </td>
    <td> shirt </td>
  </tr>
  <tr>
    <td> 4984 </td>
    <td> yes </td>
    <td> hat </td>
  </tr>
  I have a javascript function that takes the first td and get the value, but it only takes the first value in this case 1. I want to take all of the first columns distinct values and store it in an array. so the end result should be

Renzo Calla · Accepted Answer · 2018-02-01 20:38:42Z

You can iterate them and exclude the property using the includes array method..

$(document).ready(function()
{
  var result = [];
  $('table tr').each(function(){
    if(!$(this).find('td:first').length) return;
    var text = $(this).find('td:first').text();
    if(!result.includes(text)){
      result.push(text);
    }
  });
  console.log(result);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='mytable'>
<tr>
  <th> Cars </th>
  <th> Food </th>
  <th> clothes</th>
</tr>
<tr>
  <td> 1 </td>
  <td> yes </td>
  <td> jeans </td>
</tr>
<tr>
  <td> 1 </td>
  <td> yes </td>
  <td> jeans </td>
</tr>
<tr>
  <td> 84 </td>
  <td> no </td>
  <td> shirt </td>
</tr>
<tr>
  <td> 84 </td>
  <td> no </td>
  <td> shirt </td>
</tr>
<tr>
  <td> 4984 </td>
  <td> yes </td>
  <td> hat </td>
</tr>
</table>

Collectives™ on Stack Overflow

javascript putting multiple distinct id into array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related