HasT HasT - 1 year ago 101
HTML Question

Overpas API JSON data to HTML table

I am new in JSON reading HTML. I have JSON data via Overpas API url: http://overpass-api.de/api/interpreter?data=[out:json];node%2842,31,51,36%29[birds_nest=stork];out+meta;

I need to display the values in a html table using js/jQuery (or plugins...) like:

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


'count' - count of object with unique 'id' for each user.

Please give me any sample example.

Answer Source

Example:

<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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download