将 API JSON 数据传递到 HTML 表答案

【问题标题】：Overpas API JSON data to HTML table将 API JSON 数据传递到 HTML 表
【发布时间】：2014-08-11 03:16:48
【问题描述】：

我是 JSON 阅读 HTML 方面的新手。我通过 Overpas API url 获得 JSON 数据：http://overpass-api.de/api/interpreter?data=[out:json];node%2842,31,51,36%29[birds_nest=stork];out+meta;

我需要使用 js/jQuery（或插件...）在 html 表中显示值，例如：

 nomer |         user        | count   |          
-------|---------------------|-------- |
 1     |аОleg                |   2     |                 
 2     |Eugene Ghostishev    |   1     |          
       |                     |         |

'count' - 每个用户具有唯一 'id' 的对象计数。

请给我任何示例。

【问题讨论】：

标签： javascript jquery html json html-table

【解决方案1】：

例子：

<html>
<head>

        <title>OSM Ukraine Stork Nests Statistics</title>
    <style>td { border: 1px solid black; }</style>
    <meta charset="utf-8" />
</head>
<body>
    <script type="text/javascript">
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open('GET', 'https://overpass-api.de/api/interpreter?data=[maxsize%3A1073741824][out%3Ajson][timeout%3A900]%3Barea[%22boundary%22%3D%22administrative%22][%22name%3Auk%22%3D%22%D0%A3%D0%BA%D1%80%D0%B0%D1%97%D0%BD%D0%B0%22]-%3E.a%3Bnode%28area.a%29[%22birds_nest%22%3D%22stork%22]%3Bout%20meta%3B', false);
        xmlhttp.send(null);
        var nests = eval('(' + xmlhttp.responseText + ')');

    document.write('<b>OSM Ukraine Stork Nests Statistics</b><br/>(' + nests.osm3s.timestamp_osm_base + ')');
    var users = {};
    for(var i=0; i < nests.elements.length; i++)
    {
        var el = nests.elements[i];
        if (typeof users[el.user] == "undefined")
            users[el.user] = 0;
        users[el.user] = users[el.user] + 1;
    }   

    document.write('<table>');
    document.write('<tr><th>username</th><th>count</td></tr>');
    for(var user in users)
    {
        document.write('<tr><td><a href="http://osm.org/user/' + user + '">' + user + '</a></td><td><a href="' + 
            'http://overpass-turbo.eu/?Q=[maxsize%3A1073741824]%0A[out%3Ajson]%0A[timeout%3A900]%0A%3B%0Aarea%0A%20%20[%22boundary%22%3D%22administrative%22]%0A%20%20[%22name%3Auk%22%3D%22%D0%A3%D0%BA%D1%80%D0%B0%D1%97%D0%BD%D0%B0%22]%0A-%3E.a%3B%0Anode%0A%20%20%28area.a%29%0A%20%20%28user%3A%22' + user + '%22%29%0A%20%20[%22birds_nest%22%3D%22stork%22]%3B%0Aout%20body%3B%0A&C=49.71738;33.68408;6&R' +
            '">' + users[user] + '</td></tr>');
    }
    document.write('<tr><td><b>TOTAL</b></td><td><a href="http://overpass-turbo.eu/?Q=[maxsize%3A1073741824]%0A[out%3Ajson]%0A[timeout%3A900]%0A%3B%0Aarea%0A%20%20[%22boundary%22%3D%22administrative%22]%0A%20%20[%22name%3Auk%22%3D%22%D0%A3%D0%BA%D1%80%D0%B0%D1%97%D0%BD%D0%B0%22]%0A-%3E.a%3B%0Anode%0A%20%20%28area.a%29%0A%20%20[%22birds_nest%22%3D%22stork%22]%3B%0Aout%20meta%3B&C=49.71738;33.68408;6&R">' + nests.elements.length + '</a></td></tr>');
    document.write('</table>');

</script>

https://dl.dropboxusercontent.com/u/14107903/test/stork.nests.html

【讨论】：