Transform JSON data to a specific syntax in HTML-CodePudding

I would like to "transform" JSON data with a specific syntax in HTML. look at the code below

any idea?

JSON :

[
    {
        "name_host": "test",
        "ip": "127.0.0.1",
        "place": "local",
        "status": "online"
    },

    {
        "name_host": "test2",
        "ip": "127.0.0.1",
        "place": "local",
        "status": "online"
    }
]

HTML expected :

<tbody>
    <tr>
        <td>"value of name_host"</td>
        <td>"value of ip</td>
        <td>"value of place"</td>
        <td>"value of status"</td>
    </tr>
</tbody>

CodePudding user response：

It's quite easy. You just want to iterate over each element, create a tr row during each iteration and apply values to td:

const data = [
    {
        "name_host": "test",
        "ip": "127.0.0.1",
        "place": "local",
        "status": "online"
    },

    {
        "name_host": "test2",
        "ip": "127.0.0.1",
        "place": "local",
        "status": "online"
    }
]

document.addEventListener('DOMContentLoaded', () => {
  const tbody = document.querySelector('tbody');

  data.forEach((item) => {
      const tr = document.createElement('tr');
      const tdNameHost = document.createElement('td');
      const tdIp = document.createElement('td');
      const tdPlace = document.createElement('td');
      const tdStatus = document.createElement('td');

      tdNameHost.textContent = 'value of '   item.name_host;
      tdIp.textContent = 'value of '   item.ip;
      tdPlace.textContent = 'value of '   item.place;
      tdStatus.textContent = 'value of '   item.status;

      tr.append(tdNameHost, tdIp, tdPlace, tdStatus);
      tbody.append(tr);
  });
})

<table>
  <tbody></tbody>
</table>

CodePudding user response：

<html>
<table>
    <tbody>

    </tbody>
</table>


<script>
    /* const parsed_obj = [
       {
           "name_host": "test",
           "ip": "127.0.0.1",
           "place": "local",
           "status": "online"
       },

       {
           "name_host": "test2",
           "ip": "127.0.0.1",
           "place": "local",
           "status": "offline"
       }
   ] */


    async function populate() {

        const requestURL = 'https://raw.githubusercontent.com/Enzo-QUELENIS/Dashboard_Admin_Bootstrap/developp/hosts.json';
        const requestString = await fetch(requestURL);
        const requestText = await requestString.text();
        var parsed_obj = JSON.parse(requestText);


        document.addEventListener('DOMContentLoaded', () => {
            const tbody = document.querySelector('tbody');
            console.log(tbody)
            parsed_obj.forEach((item) => {

                const tr = document.createElement('tr');
                const tdNameHost = document.createElement('td');
                const tdIp = document.createElement('td');
                const tdPlace = document.createElement('td');
                const tdStatus = document.createElement('td');

                tdNameHost.textContent = item.name_host;
                tdIp.textContent = item.ip;
                tdPlace.textContent = item.place;
                tdStatus.textContent = item.status;

                tr.append(tdNameHost, tdIp, tdPlace, tdStatus);
                tbody.append(tr);

            });
        })
    }

    populate()

</script>
</html>

with data in the code it works but with the link it doesn't