How to I display fetched JSON data in table TD

Hi all I’d need the kind assistance on displaying fetched JSON data in table TD. Is there a way to transverse the TR or TD to display the data using Javascript?
The table looks shown below. I would need to display the name of a customer in the second TD of each TR.

<table>
  <tr>
    <td>1</td>
    <td>Jill Smith</td>
    <td><button>Edit</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Amanada Lee</td>
    <td><button>Edit</button></td>
  </tr>
</table>

JS Code

window.onload = function(){ 
    fetch("https://api.jsonbin.io/b/5c55999ea3fb18257accd0d0")
    .then(function(response) {
        return response.json();
    })
    .then(function(data){
        nameData = data;
        for(i=0;i<nameData.length;i++){
             ?
        }

    })
    .catch(function(error) {
        console.log(error)
    });

}

I understand that I can add the class selector to the td but would like to know if there are other ways apart from this?

I have looked thru many threads on populating JSON into table.

Any help is appreciated. Thank you.

You would want to get each 2nd td into an array-like structure, so that you can map over each customer name and apply it to the td structure.

var nameData = [
  "Paul Wilkins",
  "Jane Smith"
];
var tableNames = document.querySelectorAll("table td:nth-child(2)");

nameData.map(function (name, index) {
  tableNames[index].innerText = name;
});

https://jsfiddle.net/892w61zr/

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.