Table not appending cells from array-CodePudding

I am trying to append these cells to a dynamic table, and fill the child Labels with text from an array.

I am not getting any errors. Only one cell with the oldest data is displayed.

for (i=0; i < response.array.length; i  ) {
                        console.log(response.array[i].Sender)

                        $('.name').html(response.array[i].Sender);
                        $('.date').html(response.array[i].Date);
                        $('.subject').html(response.array[i].Subject);
                        
                        cell.append(name);
                        cell.append(date);
                        cell.append(subject);

                        $('#table').append(cell);
                    }

EDIT:

I have tried this method, but I can't move the Labels inside the cell

 for (i=0; i < response.array.length; i  ) {
                        
                        trHTML  = '<tr><td>'   response.array[i].Sender   '<td><td>'   response.array[i].Date   '<td><td>'   response.array[i].Subject   '<td><tr>'


                    }

EDIT 2:

I have tried this, and the first cell is display correctly but the other data is display as [object Object][object Object][object Object][object Object]

trHTML = $('.name').html(response.array[i].Sender) $('.date').html(response.array[i].Date) $('.subject').html(response.array[i].Subject);

CodePudding user response：

In this line...

trHTML  = '<tr><td>'   response.array[i].Sender   '<td><td>'   response.array[i].Date   '<td><td>'   response.array[i].Subject   '<td><tr>'

...you don't have any closing tags (like </td>after the cell contents and </tr> at the end of the row), only opening tags, which leads to invalid HTML and creates code that makes no sense for the browser.

CodePudding user response：

The JSON posted in the comments was F.U.B.A.R.ed. There are 2 problems that make it inconsumable.

#	Description
⓵	There are a lot of smart quotes: `“` and `”`, I believe the only valid quotes used in JSON are double quotes `"`.
⓶	The last quote is missing and it's not because of a cut & paste job, because there's 2 objects and an array right side brackets placed properly.

So take that mess to a validator.

{“ // ⓵
  dataarray”: [{“ 
    Subject”: ”Delivery”, 
    ”Date ":"
    2022 - 06 - 02 17: 49: 36 ", " 
    Sender”: ”John”,
    ”user_id ":67890, " 
    Message”: ”This is the confirmation of your order”
  }, {“
    Subject”: ”Delivery”,
    ”Date ":"
    2022 - 06 - 07 07: 31: 25 ", "
    Sender”: ”James”,
    ”user_id ":67890, " 
    Message”: ”This is the confirmation of your order // ⓶
  }]
}

After you fix that JSON or the endpoint or whatever. Do a simple test and past the url in the browser addressbar. If it works you'll see it displayed on an unstyled page. If you still can't get it going I noticed that in OP this is used:

response.array[i]

Normally the response is the entire JSON and whatever is connected to it is a property of said response so .array[i] is an Array called "array", but the only array in the JSON is called "dataarray"?

Details commented in example below

// Pass JSON
const buildTable = data => {
  // Reference <tbody>
  const table = document.querySelector('tbody');
  /*
  Loop to generate htmlString for each <tr>
  filled with data fro JSON
  */
  for (let i = 0; i < data.length; i  ) {
    let row = `<tr>
    <td>${data[i].Sender}</td>
    <td>${data[i].Date}</td>
    <td>${data[i].Subject}</td>
    </tr>`;
    table.insertAdjacentHTML('beforeEnd', row);
  }
};

// Pass endpoint of API
const getData = async(url) => {
  // await fetch()
  const response = await fetch(url);
  // await JSON
  const json = await response.json();
  /*
  Invoke buildTable to the first ten rows
  */
  return buildTable(json);
};
// Runs at pageload
getData('https://my.api.mockaroo.com/misc.json?key=3634fcf0');

// Button bound to click event
document.querySelector('button').onclick = function() {
  const url = 'https://my.api.mockaroo.com/misc.json?key=3634fcf0';
  getData(url);
}

html {
  font: 300 2ch/1 'Segoe UI'
}

table {
  width: 90vw;
  table-layout: fixed;
  border-collapse: collapse;
}

th {
  width: 30vw;
}

td {
  border: 0.5px ridge grey;
  padding: 5px;
}

button {
  font: inherit;
  float: right;
  margin-top: 5px;
  cursor: pointer;
}

<table>
  <thead>
    <tr>
      <th>Sender</th>
      <th>Date</th>
      <th>Subject</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<button>GET 10 More</button>