javascript - Overpas API JSON data to HTML table -



javascript - Overpas API JSON data to HTML table -

i new in json reading html. have json info 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 display values in html table using js/jquery (or plugins...) like:

nomer | user | count | -------|---------------------|-------- | 1 |аОleg | 2 | 2 |eugene ghostishev | 1 | | | |

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

please give me sample example. in advance.

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; < 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

javascript jquery html json table

Comments

Post a Comment

Popular posts from this blog

model view controller - MVC Rails Planning -

model view controller - MVC Rails Planning - i'm starting rails , i'm building app stores films info, user can watch film , give grade on web application. i have coded cinema model, controller , views. now, have 2 questions: should need create model , controller grading? in case, should create or should wait , create first users model , controller? yes, on model , controller grades. that'd feasible way maintain track of who's graded what. it's create first, i'd start users, since grades depend on both films , users. ruby-on-rails model-view-controller
Read more

ruby on rails - Devise Logout Error in RoR -

ruby on rails - Devise Logout Error in RoR - while using devise in ror, encountering unusual error when trying log out url different root url. displays me : actioncontroller::invalidauthenticitytoken in devise::sessionscontroller#destroy" for illustration if rooting path after log in '/structure', , seek log out '/general' error, while logging out '/structure' fine. any help highly appreciated. ruby-on-rails ruby devise
Read more

html - Submenu setup with jquery and effect 'fold' -

html - Submenu setup with jquery and effect 'fold' - i want open submenu jquery effect fold, problem if user "hover effect" fast menu remain open, how can avoid this, jquery code is: $('ul.mainmenu li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $(this).children('ul').hide('fold', 500); } ); my jsfiddle link is: http://jsfiddle.net/9wkbf/ updated fiddle the reason behind problem is, first event $(this).children('ul').show('fold', 570); queued , until completes, sec animation not start. the next snippet can workaround $('ul.mainmenu > li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $('ul:not(.mainmenu)').hide('fold', 500); } ); *important note : work current scenario. jquery html css
Read more