How to display the json arrays using jquery?

Question

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>

What wasn't working? What did you try?

user24359
– user24359

2011-02-01 06:08:23 +00:00
Commented Feb 1, 2011 at 6:08 — user24359
– user24359, Commented Feb 1, 2011 at 6:08
Maybe $.each(data.results.places, ...

a paid nerd
– a paid nerd

2011-02-01 17:37:35 +00:00
Commented Feb 1, 2011 at 17:37 — a paid nerd
– a paid nerd, Commented Feb 1, 2011 at 17:37
I tried that as u suggested didnt work.

user244394
– user244394

2011-02-01 17:43:05 +00:00
Commented Feb 1, 2011 at 17:43 — user244394
– user244394, Commented Feb 1, 2011 at 17:43

Alex Pakka · Accepted Answer · 2011-02-01 18:21:52Z

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:

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

Collectives™ on Stack Overflow

How to display the json arrays using jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related