Get the id of object in a tablerow - javascript

Question

Hey i'm trying to get the id of the specific object so that i can send it to the backend for now. I'm having a hard time get the individual object and not the whole list at once.

If anything looks funky it's because I'm pretty new at this and it's been alot of trial and error

my javascript looks like this:

 //waits for the html doc to be ready before atempting to run any js.
$(document).ready( () =>{

    // jquery getting our json order data from API
    $.get("http://localhost:8888/orderslist", (data) => {    

        // loops through our orderlist api
        let rows = data.map(item => {
          let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
          $clone.find('.customer_name').text(item.customer_name);
          $clone.find('.date').text(item.date);
          $clone.find('.time').text(item.time);
          $clone.find('.pickup').text(item.pickup);
          $clone.find('.comments').text(item.comments);
          $clone.find('.total').text(item.total + ' Kr.');

          let foo = function(){
            //gets id from object and sends it to backend using get method
          };

          // accept and cancel buttons
          $clone.find('.order_status').html(
            `<button id = "acceptOrder" type="button" onclick="${foo()}">Accept</button>` + 
            `<button id = "cancelOrder" type="button" onclick="${foo()})">Cancel</button>`
          );

          // loops through orders product name
          let productsName = item.products.map(prod => `${prod.name}`);
          $clone.find('.products').html(productsName.join('<br />'));

          // loops through orders product price
          let productsPrice = item.products.map(prod => `${prod.price} Kr.`);
          $clone.find('.price').html(productsPrice.join('<br />'));

          return $clone;
        });

        //appends to our frontpage html 
        $("#frontpage_new_ordertable tbody").append(rows);
    });
});

This is the json data i get from my route.

{
id: "3JBBdJdBUP7QyDvCnmsF",
date: "30/04-2020",
time: "13:40:41",
total: 40,
products: [
{
name: "Caffe Latte",
price: 40
}
]
}

My html looks like this:

 <!-- this is the table of new orders -->
      <table id="frontpage_new_ordertable">
        <tbody>
          <tr>
            <th>Customer</th>
            <th>Date</th>
            <th>Ordered at</th>
            <th>Wished pickup time</th>
            <th>Order</th>
            <th>Comments</th>
            <th>Price</th>
            <th>Total</th>
            <th>Order Status</th>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td class="customer_name"></td>
            <td class="date"></td>
            <td class="time"></td>
            <td class="pickup"></td>
            <td class="products"></td>
            <td class="comments"></td>
            <td class="price"></td>
            <td class="total"></td>
            <td class="order_status"></td>
          </tr>
        </tfoot>
      </table>

After edit it looks like this. I'm not seeing the accept button

        // loops through our orderlist api
        let rows = data.map(item => {
          let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
          $clone.data("id", item.id);
          $clone.find('.date').text(item.date);
          $clone.find('.time').text(item.time);
          $clone.find('.pickup').text(item.pickup);
          $clone.find('.comments').text(item.comments);
          $clone.find('.total').text(item.total + ' Kr.');


          $(function() {$(document).on("click", ".acceptOrder", foo);

            function foo() {
              var btn = $(this);
              var row = btn.closest("tr");
              var id = row.data("id");
              var name = row.find(".customer_name").text();  
            };

            $clone.find('.order_status').html(
              `<button type="button" class='acceptOrder">Accept</button>`
            );
        });

Answer 1

The relevant parts of the code are:

$(function() {
    $.get("http://localhost:8888/orderslist", (data) => {    

        // loops through our orderlist api
        let rows = data.map(item => {
          let $clone = $('#frontpage_new_ordertable tfoot tr').clone();

          let foo = function(){
            //gets id from object and sends it to backend using get method
          };

          $clone.find('.order_status').html(
            `<button id="acceptOrder" type="button" onclick="${foo()}">Accept</button>`
          );

          return $clone;
        });

        //appends to our frontpage html 
        $("#frontpage_new_ordertable tbody").append(rows);
    });
});

First step is to remove the duplicate id: and onclick=

$(function() {
    $(document).on("click", ".acceptOrder", foo);

    function foo() {
    }

    ...
          $clone.find('.order_status').html(
            `<button type="button" class='acceptOrder">Accept</button>`
          );
    ...
});

Now, clicking the Accept button will call 'foo' as an event, with this as the button. You can get the original JSON ID by either putting this on the button as a data-id or on the parent tr:

    let rows = data.map(item => {
      let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
      $clone.data("id", item.id);

then, in foo, you can get this as:

function foo() {
    var btn = $(this);
    var row = btn.closest("tr");
    var id = row.data("id");
    var name = row.find(".customer_name").text();
    ...
}

the alternative is to add to the button in the same way - I tend to use it on the tr as you'll probably need to get the tr anyway and it means it's available from any element (eg another button).

`<button type="button" data-id="${item.id}" ...

---

To include some more context:

$(document).ready(() =>{

    // add event listener here
    $(document).on("click", ".acceptOrder", foo);

    // add the event handler at the top-level inside doc.ready

    function foo() {
      var btn = $(this);
      var row = btn.closest("tr");
      var id = row.data("id");
      var name = row.find(".customer_name").text();
      ...
    }

    // original code
    $.get("http://localhost:8888/orderslist", (data) => {    

        // loops through our orderlist api
        let rows = data.map(item => {
          let $clone = $('#frontpage_new_ordertable tfoot tr').clone();

          // add ID to the row as a data-id
          $clone.data("id", item.id);

          // original code
          $clone.find('.customer_name').text(item.customer_name);
          ...etc

          // remove let foo =
          // let foo = function(){

          // update accept/cancel buttons

          // accept and cancel buttons
          $clone.find('.order_status').html(
            `<button class="acceptOrder" type="button">Accept</button>` + 
            `<button class="cancelOrder" type="button">Cancel</button>`
          );