CODEWITHSUNDEEP
jquery
dee cheok
dee cheok

Reputation: 257

store table data to object with name

html 

  <tbody id="player-list" class="list">
      <tr>
        <td class="id" style="display:none;">1</td>
        <td class="name">Jonny</td>
        <td class="age">27</td>
        <td class="city">Stockholm</td>
        <td class="edit"><button class="edit-item-btn">Edit</button></td>
        <td class="remove"><button class="remove-item-btn">Remove</button></td>
      </tr>
  </tbody>

js

  function SendData(){
        var tableArray =[];

        $('#player-list tr').each(function(index, tr) {
            var lines = $('td', tr).map(function(index, td) {
                return $(td).text();
            });
            // Here lines will contain an array of all td values for the current row:
            // like ['value 1', 'value 2', 'value 3']
            tableArray.push(lines);
        });

        console.log(tableArray);
    }

my intention is to store my table tr td to a object , but now i am store into a array and data in console.log is 0 = 1, 1=jonny, 2=27, 3=stockkholm and so on , it store it by number , how to do i store to object and make it list like this

id=1, name=Jonny, age=27, city=Stockholm ?

Upvotes: 1

Views: 988

Answers (2)

guradio
guradio

Reputation: 15555

var tabledata = $(".needed").map(function() {
  var obj = {};
  obj[$(this).attr('data')] = $(this).text();
  return obj;

}).get();

console.log(tabledata)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="player-list" class="list">
    <tr>
      <td class="needed" data="id" style="display:none;">1</td>
      <td class="needed" data="name">Jonny</td>
      <td class="needed" data="age">27</td>
      <td class="needed" data="city">Stockholm</td>
      <td class="edit">
        <button class="edit-item-btn">Edit</button>
      </td>
      <td class="remove">
        <button class="remove-item-btn">Remove</button>
      </td>
    </tr>
  </tbody>
</table>

No need for .each() only map will do

var obj = {};
var tabledata = $(".needed").map(function() {
  obj[$(this).attr('data')] = $(this).text();
  return obj;

}).get();

console.log(tabledata)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="player-list" class="list">
    <tr>
      <td class="needed" data="id" style="display:none;">1</td>
      <td class="needed" data="name">Jonny</td>
      <td class="needed" data="age">27</td>
      <td class="needed" data="city">Stockholm</td>
      <td class="edit">
        <button class="edit-item-btn">Edit</button>
      </td>
      <td class="remove">
        <button class="remove-item-btn">Remove</button>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115202

Use an object instead and define property based on the class name.

var tableArray = [];

$('#player-list tr').each(function(index, tr) {
  // initialize object
  var obj = {};
  // iterate over the `td` except last two
  $('td:not(.edit,.remove)', tr).each(function() {
    // define object properties
    obj[this.className] = $(this).text();
  });
  // push the object reference into the array
  tableArray.push(obj);
});

console.log(tableArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="player-list" class="list">
    <tr>
      <td class="id" style="display:none;">1</td>
      <td class="name">Jonny</td>
      <td class="age">27</td>
      <td class="city">Stockholm</td>
      <td class="edit">
        <button class="edit-item-btn">Edit</button>
      </td>
      <td class="remove">
        <button class="remove-item-btn">Remove</button>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions