API GET 请求 - <array> - 到 table

Question

我想把下面linkhttps://httpbin.org/get得到的数组转成一个table。我的代码已经可以运行，但输出以一个数组的形式出现。它应该用键和值填充 table .

输出应如下所示：

关键|价值 "origin" | “178.115.129.85” （字符串）（字符串）

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>

Answer 1

为了用键和值填充table，我们可以将'tr'和'td'子元素附加到现有的table 正文替换行

            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>

Answer 2

There is one more question, How can I access the second level, I mean all the data that is inside the "headers" will be listed separately each as a new or row ...

这是递归扩展数据对象的变体。

function tabulate(tb, a)
{           for (k in a)
            { tr = document.createElement('tr')
              for (d of [k, a[k]])
              { if (d instanceof Object) { tabulate(tb, d); continue }
                td = document.createElement('td')
                td.appendChild(document.createTextNode(JSON.stringify(d)))
                tr.appendChild(td)
              }
              tb.appendChild(tr)
            }
}

function loadDoc(url) {
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
          tabulate(document.getElementById('data'), eval("a="+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>

API GET 请求 - <array> - 到 table

API GET Request - <array> - to table

get

httpresponse