API GET Request - <array> - to table

I want to turn the array that I get from the following link https://httpbin.org/get and turn it into a table. My code already works but the output comes in one piece in an array. it supposed to fill the table with keys and values .

The output should look something like this :

KEY | VALUE "origin" | "178.115.129.85" (string) (string)

function loadDoc(url) {
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            document.getElementById('data').innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
    <script src="script.js" type="text/javascript"></script>

    <title>GET Request</title>
</head>
<body>

       
        <button id="submit" onclick="loadDoc('https://httpbin.org/get')" type="button" class="btn btn-success">Get Request</button>
        <div class="container">
            <table id="tableHead" class="table table-dark">
                <thead>
                <tr>
                    <th>Key</th>
                    <th>Value</th>

                </tr>

                </thead>
                <tbody id="data">

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

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>

Solution

In order to fill the table with keys and values, we can append 'tr' and 'td' child elements to the existing table body by replacing the line

            document.getElementById('data').innerHTML = this.responseText;

function loadDoc(url) {
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            eval("a = "+this.responseText)
            tb = document.getElementById('data')
            for (k in a)
            {
              tr = document.createElement('tr')
              for (d of [k, JSON.stringify(a[k])])
              {
                td = document.createElement('td')
                td.appendChild(document.createTextNode(d))
                tr.appendChild(td)
              }
              tb.appendChild(tr)
            }
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
    <script src="script.js" type="text/javascript"></script>

    <title>GET Request</title>
</head>
<body>

       
        <button id="submit" onclick="loadDoc('https://httpbin.org/get')" type="button" class="btn btn-success">Get Request</button>
        <div class="container">
            <table id="tableHead" class="table table-dark">
                <thead>
                <tr>
                    <th>Key</th>
                    <th>Value</th>

                </tr>

                </thead>
                <tbody id="data">

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

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>