How to load Json array into separate table rows?

Question

I'm having trouble with displaying my json data correctly. I want to get each products and place them into it's own row.

The problem now is that it places all the data of for example the value "name" into one table row instead of multiple rows.

This is my json data

{
 id: "FVFkkD7s8xNdDgh3zAyd",
 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"
},
{
   id: "WiX5h0wFMNkCux9cINYq",
   name: "kaffe modal",
   price: "230",
   size: "Medium",
   quantity: "39 ml"
},

this is my Js file which gets the json data. As you can see i'm only working with the "name" value for now

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

    let rows = data.map(item => {

      let $clone = $('#frontpage_new_ordertable tfoot tr').clone();

      let productsName = item.products.map(prod => `${prod.name}`);
      $clone.find('.name').html(productsName);

      return $clone;
    });

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


    });

this is my html file

<body>  
   <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>

  <script src="./itemPage.js"></script>

</body>

Yasin Ersoy · Accepted Answer · 2020-05-28 13:32:31Z

1

you must replace let rows = data.map(item => { to let rows = data.products.map(item => {

and

      let productsName = item.products.map(prod => `${prod.name}`);

to

      let productsName = item.name;

https://jsfiddle.net/ab7t1vmf/3/

answered May 28, 2020 at 13:32

Yasin Ersoy

442 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gpouilloux · Accepted Answer · 2020-05-28 13:33:20Z

0

The issue in your JS snippet seems to be let rows = data.map(item => { ...

From what you describe, the JSON data is comprised of 3 keys:

id
name
products

You cannot execute a map function directly on a Javascript Object, this function requires an array.

Looking a bit more at your code, I understand you need to display each product on its own row. Thus, you would need to use the map function on data.products which contains an array (of products).

let rows = data.products.map(item => {
    // ...
    $clone.find('.name').html(item.name);
    // ...
// ...
});

Reference: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map

answered May 28, 2020 at 13:33

gpouilloux

261 silver badge3 bronze badges

Collectives™ on Stack Overflow

How to load Json array into separate table rows?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related