如何将AJAX检索到的JSON格式的字符串转换为格式化的表格

Question

I am new to web programming and have been having a lot of trouble with using AJAX to parse as a string and create a table.

[{"source":"1","name":"random","amount":"5"},{"source":"1","name":"random","amount":"5"}]

This is how the data is parsed as I used the code from W3SCHOOLS but adapted it to my situation I used the JSON stringify command to change it to a string also. https://www.w3schools.com/js/js_json_php.asp Based on the data above which has been retrieved by a AJAX code I am having troubles creating a table based on those results.

Answer 1

If you want your myObj in a format like table, then there is nothing that automatically converts from an object to table format built into html/javascript.

You could use some lib's to do this, but for something simple the below might be a start for you.

const myObj = [{"source":"1","name":"random","amount":"5"},{"source":"1","name":"random","amount":"5"}];

const tbody = document.querySelector("tbody");

myObj.forEach(r => {
  const tr = document.createElement("tr"); 
  ["source", "name", "amount"].forEach(f => {
    const td = document.createElement("td");
    td.innerText = r[f];
    tr.appendChild(td);
  });
  tbody.appendChild(tr);
});

<table border="1">
  <thead>
    <th>Source</th>
    <th>Name</th>
    <th>Amount</th>
  </thead>
  <tbody>
  </tbody>
</table>

</div>