How to get td values and store in array using Jquery?

Question

I'm looking for a way to get the (first,second, third so on) td values, and store them in array.

Using each to iterate a td:

$("table tbody tr td").each(function(i,e){
        console.log($(this).html());
      });

With this code I need to to take all columns values, e.g.:

George
Princeton
Alabama
Pizza

How to store these values in array with the respective keys: Name, College, State, Food. I was thinking this:

 var array = [];
$("table tbody tr td").each(function(i,e){
        array['Name'] = $(this) ??  //I dont know how get the first td. 
      });

I don't know if it is the best way to iterate a table, but a think that I'm missing something in how to get the first, second, third td values.

Table: (This is just an example, the values are dynamically created)

<table >
    <tbody>
        <tr>
            <td> George </td>
            <td> Princeton </td>
            <td> Alabama </td>
            <td> Pizza </td>
        </tr>
        <tr>
            <td> Charli</td>
                <td> Princeton </td>
            <td> Alabama </td>
            <td> Milk Shake </td>
        </tr>
        <tr>
            <td> Max</td>
                <td> Princeton </td>
            <td> Alabama </td>
            <td> Rice </td>
        </tr>
        <tr>
            <td> Peter</td>
                <td> Princeton </td>
            <td> Alabama </td>
            <td> Fast Food </td>
        </tr>
    </tbody>
</table>

To get the text of a `td`, use [`text()`](https://api.jquery.com/text/). — Heretic Monkey, Jun 11 '19 at 23:23
To get the first `td`, use `$(this).closest('tr').find('td').first()` — Heretic Monkey, Jun 11 '19 at 23:25
@HereticMonkey I don't think that is duplicate, I don't know to take the td first, second, third...etc, values — Hasunohana, Jun 11 '19 at 23:25
Okay, well, to be fair, the title of your question is "How to store values in array using Jquery?" and the first sentence is "I'm looking for a way to store a td value in array with key => value." Perhaps you can [edit] your title and question to make it more obvious what you're having an issue with? — Heretic Monkey, Jun 11 '19 at 23:28
Also, the appropriate duplicate would be [Create an array of objects by iterating through table rows](https://stackoverflow.com/q/30076022/215552) — Heretic Monkey, Jun 11 '19 at 23:30
Did you see: https://stackoverflow.com/questions/56535961/how-do-you-build-a-row-sorting-horizontal-sort-for-html-table — Twisty, Jun 11 '19 at 23:58

Gabriele Petrioli · Answer 1 · 2020-01-07T14:06:37.373

const arrayFromJQuery = $("table tbody tr").map(function(i, row) {
  const data = $('td', row);
  return {
    Name: data.eq(0).text().trim(),
    College: data.eq(1).text().trim(),
    State: data.eq(2).text().trim(),
    Food: data.eq(3).text().trim()
  }
}).get();

console.log(arrayFromJQuery);

// or without jquery, just modern JS

const array = [...document.querySelectorAll("table tbody tr")].map((row) => {
  const [Name, College, State, Food] = [...row.querySelectorAll('td')].map(td => td.textContent.trim());
  return {
    Name,
    College,
    State,
    Food
  }
})
console.log(array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td> George </td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Pizza </td>
    </tr>
    <tr>
      <td> Charli</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Milk Shake </td>
    </tr>
    <tr>
      <td> Max</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Rice </td>
    </tr>
    <tr>
      <td> Peter</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Fast Food </td>
    </tr>
  </tbody>
</table>

Twisty · Answer 2 · 2019-06-12T00:39:28.640

Try this:

$(function() {
  var keys = [];
  var myData = {};
  $("table thead th").each(function() {
    var k = $(this).text().trim().toLowerCase();
    keys.push(k);
    myData[k] = [];
  });
  $("table tbody tr").each(function(i, el) {
    $.each(keys, function(k, v) {
      myData[v].push($("td:eq(" + k + ")", el).text().trim());
    });
  });
  console.log(myData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>College</th>
      <th>State</th>
      <th>Food</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> George </td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Pizza </td>
    </tr>
    <tr>
      <td> Charli</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Milk Shake </td>
    </tr>
    <tr>
      <td> Max</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Rice </td>
    </tr>
    <tr>
      <td> Peter</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Fast Food </td>
    </tr>
  </tbody>
</table>

Results:

{
  "name": [
    "George",
    "Charli",
    "Max",
    "Peter"
  ],
  "college": [
    "Princeton",
    "Princeton",
    "Princeton",
    "Princeton"
  ],
  "state": [
    "Alabama",
    "Alabama",
    "Alabama",
    "Alabama"
  ],
  "food": [
    "Pizza",
    "Milk Shake",
    "Rice",
    "Fast Food"
  ]
}

If you need an Array of Objects, you can do this:

$(function() {
  var keys = [];
  var myData = [];
  $("table thead th").each(function() {
    var k = $(this).text().trim().toLowerCase();
    keys.push(k);
  });
  $("table tbody tr").each(function(i, el) {
    var row = {}
    $.each(keys, function(k, v) {
      row[v] = $("td:eq(" + k + ")", el).text().trim();
    });
    myData.push(row);
  });
  console.log(myData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>College</th>
      <th>State</th>
      <th>Food</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> George </td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Pizza </td>
    </tr>
    <tr>
      <td> Charli</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Milk Shake </td>
    </tr>
    <tr>
      <td> Max</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Rice </td>
    </tr>
    <tr>
      <td> Peter</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Fast Food </td>
    </tr>
  </tbody>
</table>

Results:

[
  {
    "name": "George",
    "college": "Princeton",
    "state": "Alabama",
    "food": "Pizza"
  },
  {
    "name": "Charli",
    "college": "Princeton",
    "state": "Alabama",
    "food": "Milk Shake"
  },
  {
    "name": "Max",
    "college": "Princeton",
    "state": "Alabama",
    "food": "Rice"
  },
  {
    "name": "Peter",
    "college": "Princeton",
    "state": "Alabama",
    "food": "Fast Food"
  }
]

Hope that helps.

hi Twisty, if my th have a space between text, example `Student Name` how can I remove it in `myData` ? — Choy, Mar 29 '20 at 14:49
@StackOverFlowSavedMyLife `var k = $(this).text().trim().toLowerCase().replace(" ", "");` should do it. — Twisty, Mar 29 '20 at 15:07
but this will just remove the first space of the string, what if the string is `"U know Nothing"` — Choy, Mar 29 '20 at 15:10

Hasunohana · Answer 3 · 2019-06-12T00:23:06.567

Reading this I gotta find a solution.

 $("#test").click(function(){

          var thvalues = $('table thead th').map(function(){
            return $(this).text();
          });

          var rows = $('table tbody tr').map(function(){
            var result = {};
            var values = $(this).find('td').map(function(){
              return $(this).text();
            });

          for(var i=0;i<thvalues.length;i++){
            result[thvalues[i]] = values[i];
          }

          return result
          }).toArray();

          console.log(thvalues);
          console.log(rows );

       }); // endAdd

Results

(2) [{…}, {…}]
0:
Name: " George "
State: " Alabama "
College: " Princeton "
Food: " Pizza "
__proto__: Object
1:
Name: " Peter "
State: " Alabama "
College: " Princeton "
Food: " Fast Food "
__proto__: Object
length: 2
__proto__: Array(0)

How to get td values and store in array using Jquery?

3 Answers3