How can I add rows to a table?

Question

I am trying to get data form a server this is a long array of objects, something like:

{
  "id": ,
  "product": "Candy",
  "Country": "",
  "date": "",
  "amount": ,
  "image": "candy.jpg"
  "id": ,
  "product": "Chips",
  "Country": "",
  "date": "",
  "amount": ,
  "image": "chips"
}

As you can see above, this is a row after row, I have a function in Javascript where I get the data from the server and put it in a table. But it gives me just all the data without doing it in separate rows.

Candy Africa June 2022 75 kg candy.jpg Chips America July 2022 65 kg chips.jpg

So at the end I want a table like this:

(Imagine as a table)

Product  Country  Date       Amount  Image
Candy    Africa   June 2022  75 kg   candy.jpg
Chips    America  July 2022  65 kg   chips.jpg

This is my code now:

function createTable() {
  $(document).ready(function () {
    setTimeout(function () {
      $.ajax({
        url: "LINK",
        type: 'GET',
        dataType: 'json',

        success: function (data) {
          $("#inputTable").html(data);

          $(data).each(function (index, info) {

            $('#inputTable').append('<td>' + info.product +  '</td>') +
            $('#inputTable').append('<td>' + info.country + '</td>')  +
            $('#inputTable').append('<td>' + info.date + '</td>')  +
            $('#inputTable').append('<td>' + info.amount + '</td>' ) +
            $('#inputTable').append('<td>' + info.image  + '</td>')

          });
        }
      });
    }, 1);
  });
}

Answer 1

Each object needs to be in a separate table row.

To do this, place each object's <td> elements within a single <tr> element.

const inputTable = $('#inputTable');

// add heading to table
inputTable.empty();
inputTable.append(`
  <tr>
    <th>Product</th>
    <th>Country</th>
    <th>Date</th>
    <th>Amount</th>
    <th>Image</th>
  </tr>
`);

// add each row to table
$(data).each(function (index, info) {
  
  inputTable.append(`
    <tr>
      <td>${info.product}</td>
      <td>${info.country}</td>
      <td>${info.date}</td>
      <td>${info.amount}</td>
      <td>${info.image}</td>
    </tr>
  `);
  
});

Answer 2

The data from the server is not correct JSON, it should be an array of objects:

[{
  "id": 28252,
  "product": "Candy",
  "Country": "Africa",
  "date": "june 2022",
  "amount": 75,
  "image": "candy.jpg"}.{
  "id": 28252,
  "product": "Chips",
  "Country": "America",
  "date": "july 2022",
  "amount": 65,
  "image": "chips"
}]

However, if you have no control over how the data is formatted then you can rebuild the data into the correct format, from a string.

I might do this by searching for ,"id" in the string and replacing it with '},{"id"'. The comma is so we get every one except the first "id".

You also need to add the array indicator at the beginning of the json string, something like:

function createTable() {
  $(document).ready(function () {
    setTimeout(function () {
      $.ajax({
        url: "LINK",
        type: 'GET',
        dataType: 'json',


        success: function (data) {
          $("#inputTable").html(data);  //Not sure what this line is for? See the raw data?
     
          data = "[" + data + "]"; //it's an array
           data = data.replace(',"id"','},{"id"');     
          $(data).each(function (index, info) {

            $('#inputTable').append('<td>' + info.product +  '</td>') +
              $('#inputTable').append('<td>' + info.country + '</td>')  +
              $('#inputTable').append('<td>' + info.date + '</td>')  +
              $('#inputTable').append('<td>' + info.amount + '</td>' ) + 
              $('#inputTable').append('<td>' + info.image  + '</td>') 


            
          });
        }
      });
    }, 1);
  });
}