用JSON数据填充表

Question

I want to fill a table using the data from a json file in the next order: key, value and input

eg row1- (serverIP|12.34.56.78.90|input) row2- (serverName|master1|input)...

I can't figure out how to do it. Any help is appreciated

Json
{
    "original":
    {
        "serverIP":"12.34.56.78.90",
        "serverName":"master1"
    }
}


html/js
    <table id="table">
        <tr>
          <th>KEY</th>
          <th>VALUE</th>
          <th>INPUT</th>
        </tr>
      </table>

    <script>
        fetch('data.json')
            .then(response => response.json())
            .then(data => {
                buildTemplate(data);
            })
            .catch(error => console.error(error))

            const buildTemplate = (data) => {
                const table = document.getElementById('table');
                const tbody = document.createElement("tbody");
                const tr = document.createElement('tr');
                for (const key in data.original) {
                    if (data.original.hasOwnProperty(key)) {
                        const element = key;
                        let td1 = document.createElement('td');
                        td1.innerText = element;
                        tr.appendChild(td1);
                        for (const key in data.original) {
                            if (data.original.hasOwnProperty(key)) {
                                const element = data.original[key];
                                let td2 = document.createElement('td');
                                td2.innerText = data.original[key];
                                let td3 = document.createElement('td');
                                let input = document.createElement('input');
                                td3.appendChild(input);
                                tr.appendChild(td2);
                                tr.appendChild(td3);
                                tbody.appendChild(tr);
                                table.appendChild(tbody);
                            }
                        }
                    }
                }
            }
    </script>

Answer 1

This works for me (I deleted fetch, pass json straight away). Here is the function:

const buildTemplate = (data) => {
  const table = document.getElementById('table');
  const tbody = document.createElement("tbody");
  for (const key in data.original) {
    if (data.original.hasOwnProperty(key)) {
      let tr = document.createElement('tr');

      let td1 = document.createElement('td');
      td1.innerText = key;
      tr.appendChild(td1);

      let td2 = document.createElement('td');
      td2.innerText = data.original[key];
      tr.appendChild(td2);

      let td3 = document.createElement('td');
      let input = document.createElement('input');
      td3.appendChild(input);
      tr.appendChild(td3);

      tbody.appendChild(tr);
      table.appendChild(tbody);
    }
  }
}

Link to bin: https://jsbin.com/toguxocihe/2/edit?html,js,output