I was trying to use $.getJSON to go through the json arrays from the twitter api sample code and display each of these values using jquery ? but it wasnt displaying anything any example/help would be appreciated
I want to display each tweet users long & lat in google maps..
thanks in advance
This json array is from http://dev.twitter.com/doc/get/geo/search
{
"result": {
"places": [
{
"name": "Twitter HQ",
"country": "The United States of America",
"country_code": "US",
"attributes": {
"street_address": "795 Folsom St"
},
"url": "http://api.twitter.com/1/geo/id/247f43d441defc03.json",
"id": "247f43d441defc03",
"bounding_box": {
"coordinates": [
[
[
-122.400612831116,
37.7821120598956
],
[
-122.400612831116,
37.7821120598956
],
[
-122.400612831116,
37.7821120598956
],
[
-122.400612831116,
37.7821120598956
]
]
],
"type": "Polygon"
},
"contained_within": [
{
"name": "San Francisco",
"country": "The United States of America",
"country_code": "US",
"attributes": {
},
"url": "http://api.twitter.com/1/geo/id/5a110d312052166f.json",
"id": "5a110d312052166f",
"bounding_box": {
"coordinates": [
[
[
-122.51368188,
37.70813196
],
[
-122.35845384,
37.70813196
],
[
-122.35845384,
37.83245301
],
[
-122.51368188,
37.83245301
]
]
],
"type": "Polygon"
},
"full_name": "San Francisco, CA",
"place_type": "city"
}
],
"full_name": "Twitter HQ, San Francisco",
"place_type": "poi"
}
]
},
"query": {
"url": "http://api.twitter.com/1/geo/search.json?query=Twitter+HQ&accuracy=0&autocomplete=false&granularity=neighborhood",
"type": "search",
"params": {
"granularity": "neighborhood",
"accuracy": 0,
"autocomplete": false,
"query": "Twitter HQ"
}
}
}
<!---- CODE --->
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery-TwitterAPI json</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#letter-b a').click(function() {
$.getJSON('geo.json', function(data) {
$('#tweetstuff').empty();
$.each(data.results, function(entryIndex, entry) {
var html = '<div class="entry">';
html += 'places' + entry.places + '</br>';
html += 'name' + entry.places.name + '</br>';
html += 'country' + entry.places.country + '</br>';
html += 'attributes' + entry.places.attributes + '</br>';
html += 'url' + entry.places.url + '</br>';
html += 'id' + entry.places.id + '</br>';
html += 'places' + entry.places.bounding_box + '</br>';
html += 'coordinates' + entry.places.coordinates + '</br>';
html += '</div>';
$('#dictionary').append(html);
});
});
return false;
});
});
</script>
</head>
<body>
<h1>jQuery-Twitter API Example</h1>
json
<div class="letters">
<div class="letter" id="letter-a">
<h3><a href="#">A</a></h3>
</div>
</div>
<div id="tweetstuff">
</div>
</body>
</html>
There are a bunch of errors in your code. It is “result”, not “results” and it is an object, not array, so you are out to use
data.result.places– this is where good JavaScript editor helps. Also, there is no element with id “dictionary” on your page. And it is<br/>, not</br>.Here is the working code: