如何使用jquery显示json数组?

时间:2011-02-01 03:30:35

标签: jquery json

我试图使用$ .getJSON从twitter api示例代码中查看json数组并使用jquery显示每个值?但它没有显示任何任何示例/帮助将不胜感激

我想长时间显示每个推文用户拉特谷歌地图..

提前致谢

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

1 个答案:

答案 0 :(得分:3)

您的代码中存在大量错误。它是“结果”,而不是“结果”,它是一个对象,而不是数组,因此您可以使用data.result.places - 这是优秀的JavaScript编辑器所帮助的地方。此外,您的页面上没有id“词典”的元素。它是<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>