How do I get specific value from Json data and pass it

Question

I want get the id "FVFkkD7s8xNdDgh3zAyd" from my json input data. I want to send it back through my deletedProduct function to be able to know which document in my firebase collection to delete.

The only id's i'm getting right now is the id for the products in the array. but i also need the get the id of my json object

this is the json data input

{
id: "FVFkkD7s8xNdDgh3zAyd",
coordinates: {
_latitude: 55.671815,
_longitude: 12.5223
},
name: "AlperKaffe",
products: [
{
   id: "0cfBnXTijpJRu14DVfbI",
   name: "Første Kaffe", 
   price: "1",
   size: "small",
   quantity: "20 ml"
},
{
   id: "JQadhkpn0AJd0NRnnWUF",
   name: "Anden Kaffe",
   price: "2",
   size: "Medium",
   quantity: "25 ml"
},
{
   id: "UwHHdH8bFxbVHkDryeGC",
   name: "kaffeeen",
   price: "300",
   size: "Small",
   quantity: "23 ml"
},
]

This is my javascript file

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

    // event handler at the top-level inside doc.ready
    function deletedProduct() {
        let btn = $(this);
        let row = btn.closest("tr");
        let productId = row.data("productId");

        $.ajax({
            method: "POST",
            url: "/deletedProduct",
            data: { 
                productId: productId,
            },
            success: function (status) {
                if (status === true) {
                    alert("Product has been deleted");
                    location.reload();
                } else {
                    alert("Something went wrong");
                }
            }
        });
    }

    // event listener
    $(document).on("click", ".deleteProduct", deletedProduct);

    // Jquery getting our json product data from API
    $.get("http://localhost:8888/products", (data) => {

        let rows = data[0].products.map(item => {

            let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
            $clone.data("productId", item.id);

            $clone.find('.name').html(item.name);
            $clone.find('.price').html(item.price);
            $clone.find('.size').html(item.size);
            $clone.find('.quantity').html(item.quantity);

            $clone.find('.buttons').html(`<button class="deleteProduct" type="button">Delete</button><br>`);

            return $clone;
        });

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

    });
});

this is the used html for itempage

  <table id="frontpage_new_ordertable">
    <tbody>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Size</th>
        <th>Quantity</th>
        <th></th>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td class="name"></td>
        <td class="price"></td>
        <td class="size"></td>
        <td class="quantity"></td>
        <td class="buttons"></td>
      </tr>
    </tfoot>
  </table>

Where in the code is it not working and what is it doing so its not working? — imvain2, May 28 '20 at 19:10
so you don't know if it is or isn't working because you haven't tested it out? — imvain2, May 28 '20 at 19:29
JSON is a text format, like CSV. Just as you wouldn't talk about getting something from your "CSV object", you don't talk about getting something from a "JSON object". JSON is just the format it was in going over the wire. Once it hits the callback, `data` is an object, with a `properties` property which is an array of objects. — Heretic Monkey, May 28 '20 at 19:29
As for the question, isn't the id you're looking for just `data.id`? In which case, just store that in a different data slot, like `$clone.data('documentId, data.id)` or something. — Heretic Monkey, May 28 '20 at 19:32

How do I get specific value from Json data and pass it

0 Answers0