2011-02-01 76 views
0

我想使用$ .getJSON从twitter api示例代码中浏览json数组,并使用jquery显示每个这些值?但它不是事先显示任何东西例如/帮助将不胜感激如何使用jQuery显示json数组?

我要显示的每个鸣叫用户长期&纬度在谷歌地图..

感谢

这JSON数组是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> 
+0

什么是不工作?你尝试了什么? – 2011-02-01 06:08:23

+0

也许`$ .each(data.results.places,...` – 2011-02-01 17:37:35

回答

3

代码中有一堆错误。它是“结果”,而不是“结果”,它是一个对象,而不是数组,所以你不得不使用data.result.places--这是JavaScript编辑器所能提供的帮助。另外,页面上没有ID为“dictionary”的元素。它是<br/>,而不是</br>

这里是工作代码:

<!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"> 
var data = { 
    "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" 
    } 
    } 
}; 


$(document).ready(function() { 
    $('#letterA A').click(function() { 
    //$.getJSON('geo.json', function() { 
     //$('#tweetstuff').empty(); 
     $.each(data.result.places, function(entryIndex, entry) { 
     var html = '<div class="entry">'; 
     html += 'place ' + entryIndex + '<br/>'; 
     html += 'name: ' + entry.name + '<br/>'; 
     html += 'country: ' + entry.country + '<br/>'; 
     html += 'attributes: ' + entry.attributes + '<br/>'; 
     html += 'url: ' + entry.url + '<br/>'; 
     html += 'id: ' + entry.id + '<br/>'; 
     html += 'places: ' + entry.bounding_box.coordinates + '<br/>'; 
     //html += 'coordinates' + entry.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="letterA"> 
      <h3><a href="#">A</a></h3> 
     </div> 

     </div> 
     <div id="dictionary"> 
     </div> 

</body> 
</html>