How do I add enitre row of data of an table in an array of objects?

Question

I'm trying to add entire row data of a table to my array of object whenever someone click on anchor tag named view/edit. I wrote some logic but I guess I'm missing something.

index.html file


<table class="table">
  <thead>
    <tr>
      <th scope="col">User Name</th>
        <th scope="col">Order No</th>
        <th scope="col">Order Date</th>
        <th scope="col">Status</th>
        <th scope="col">Total Amount</th>
        <th scope="col">Total Qty</th>
        <th scope="col">Total Products</th>
        <th scope="col">View/Edit</th>
    </tr>
  </thead>
  <tbody>
       
    <tr>
       <td id="user-name">Alice</td>
        <td id="order-no">8536</td>
        <td id="order-date">13/07/2020</td>
        <td id="status" >Pending</td>
        <td id="total-amount" >1800</td>
        <td id="total-qty" >3</td>
        <td id="total-products" >3</td>
        <td>
        <a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
            </td>
    </tr>
    
    <tr>
       <td id="user-name">Michael</td>
        <td id="order-no">4354</td>
        <td id="order-date">12/07/2020</td>
        <td id="status" >Approved</td>
        <td id="total-amount" >1500</td>
        <td id="total-qty" >2</td>
        <td id="total-products" >2</td>
        <td>
        <a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
            </td>
    </tr>
  </tbody>
</table>

app.js file

let usersData = []; // array to store user table objects

$('#view-data').click(function(){
  var row  = $(this).closest("tr");
   
  // userData object to store data from a table complete row
  var userData = {
        "order_no": row.find('#order-no').text(),
        "order_date": row.find('#order-date').text(),
        "totalproducts": row.find('#total-products').text(),
        "total_amount": row.find('#total-amount').text(),
        "total_qty": row.find('#total-qty').text(),
        "status": row.find('#status').text(),
        "user_name": row.find('#user-name').text(),
  }
  usersData.push(userData)
  console.log(usersData)
})

Note: I should use button instead a tag but I'm using anchor tag because it'll open another tab in future for same data manipulation.

Siva Kondapi Venkata · Accepted Answer · 2021-02-08 11:00:22Z

Selector need to change to class (view-data) instead of id

let usersData = []; // array to store user table objects

$('.view-data').click(function(ev){  
          ev.preventDefault();
          ev.stopPropagation();
  var row  = $(ev.currentTarget).closest("tr");
   
  // userData object to store data from a table complete row
  var userData = {
        "order_no": row.find('#order-no').text(),
        "order_date": row.find('#order-date').text(),
        "totalproducts": row.find('#total-products').text(),
        "total_amount": row.find('#total-amount').text(),
        "total_qty": row.find('#total-qty').text(),
        "status": row.find('#status').text(),
        "user_name": row.find('#user-name').text(),
  }
  usersData.push(userData)
  console.log(userData)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">User Name</th>
        <th scope="col">Order No</th>
        <th scope="col">Order Date</th>
        <th scope="col">Status</th>
        <th scope="col">Total Amount</th>
        <th scope="col">Total Qty</th>
        <th scope="col">Total Products</th>
        <th scope="col">View/Edit</th>
    </tr>
  </thead>
  <tbody>
       
    <tr>
       <td id="user-name">Alice</td>
        <td id="order-no">8536</td>
        <td id="order-date">13/07/2020</td>
        <td id="status" >Pending</td>
        <td id="total-amount" >1800</td>
        <td id="total-qty" >3</td>
        <td id="total-products" >3</td>
        <td>
        <a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
            </td>
    </tr>
    
    <tr>
       <td id="user-name">Michael</td>
        <td id="order-no">4354</td>
        <td id="order-date">12/07/2020</td>
        <td id="status" >Approved</td>
        <td id="total-amount" >1500</td>
        <td id="total-qty" >2</td>
        <td id="total-products" >2</td>
        <td>
        <a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
            </td>
    </tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

How do I add enitre row of data of an table in an array of objects?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related