How do I get geo coordinates out of the JSON? Twitter API

Question

This is what the JSON outputs

{
  "created_at": "Wed, 09 May 2012 22:13:32 +0000",
  "from_user": "EastCClothing",
  "from_user_id": 119699125,
  "from_user_id_str": "119699125",
  "from_user_name": "Tester23",
  "geo": {
    "coordinates": [
      54.9742,
      -1.5974
    ],
    "type": "Point"
  },
  "id": 200347799861198850,
  "id_str": "200347799861198849",
  "iso_language_code": "pt",
  "metadata": {
    "result_type": "recent"
  },
  "profile_image_url": "http://a0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png",
  "profile_image_url_https": "https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png",
  "source": "<a href="http://twitter.com/download/android" rel="nofollow">Twitter for Android</a>",
  "text": "#CM0655 GEO",
  "to_user": null,
  "to_user_id": 0,
  "to_user_id_str": "0",
  "to_user_name": null
}, 

What I am trying to do is get a hold of the coordinates so that I may use them with google maps api, I am able to access all the other details fine but can't access the coordinates through what I expected 'json.results[i].geo.coordinates'. Here's my JQuery

$(function(){
    function searchTweets() {
        var url='http://search.twitter.com/search.json?callback=?&q=cm0655';
        $.getJSON(url,function(json){


            var output = [];


            for (var i = 0, len = json.results.length; i < len; i++) {


               output.push('<p id="tweet"><img id="tweetImage" src="' + json.results[i].profile_image_url + '" width="48" height="48" /><span id="tweetText">' + '<a href="http://twitter.com/' + json.results[i].from_user + '">' + json.results[i].from_user + "</a> " + json.results[i].text + "<br />" + json.results[i].created_at + '</p>' + json.results[i].geo.coordinates + '</span>');
            }

            $("div.twitter2").html(output.join('')).slideDown('slow');
        });
    }


    var timer = setInterval(searchTweets, 20000);


    searchTweets();

});

Many thanks

Answer 1

I thought I'd add the $.each method just in case anyone went down that path.

    // The code below uses the Twitter API found here https://dev.twitter.com/docs to search for the latest mention of CM0655 (module code).

    var twitterURL = "http://search.twitter.com/search.json?q=%23CM0655";
    function twitterSearch() { // Create the weather function   
        $.ajax({
        url: twitterURL, //http request string for the weather service
        dataType: "jsonp",                                                                                                  
        success: function(JSON) {                      // If successful parse the JSON data
            $('#twitterSearch').html("");
            $.each(JSON.results, function(i,tweet){
                    var tweeterID  = tweet.from_user_id;
                    var dateFormat = tweet.created_at;
                    var newDate    = dateFormat.replace('+0000', '');
                    var title      = 'title="Tweeted from"';
                    var id         = tweet.id;
                    var locData    = tweet.geo;
                    getCordsData(locData);
                    $('#twitterSearch').append('<li id="tweet' + id + '" class="mainP tweet"><img class="tweetImage" src="'+ tweet.profile_image_url +'" height="20" width="20" /> <a class="tweetLink" href="http://twitter.com/' + tweet.from_user + '" target="_blank">' + tweet.from_user + '</a> on the ' + newDate + ' <br /> tweeted<span id="tweetTextColor">: ' + tweet.text + '</span></li>');
            });
        //alert("Ajax text");
        setTimeout(twitterSearch, 10000);
        }
        }); // End of ajax
     } // End of function

    function getCordsData(data){
        if(data == null){
            data = "No location data found!";
            alert(data);
        }else{
            var long = data['coordinates'][0];
            var lat = data['coordinates'][1];
            alert("long:" + long + "Lat:" + lat);
        }
    }

Answer 2

Sorry for the previous fail i've found a solution what you need to do is check if the results.geo is an object then loop if not exclude it or set it to something else i've done this

Disclaimer This is very much so not the best solution but it is a working one to give you an idea of how to solve the issue. Hope it helps!

$(function() {
    function searchTweets() {
        var url = 'http://search.twitter.com/search.json?callback=?&q=from:Eastcclothing';
        $.getJSON(url, function(json) {

            console.log(json);
            var output = [];


            for (var i = 0, len = json.results.length; i < len; i++) {

                if ($.isPlainObject(json.results[i].geo)) {
                    output.push('<p id="tweet"><img id="tweetImage" src="' + json.results[i].profile_image_url + '" width="48" height="48" /><span id="tweetText">' + '<a href="http://twitter.com/' + json.results[i].from_user + '">' + json.results[i].from_user + "</a> " + json.results[i].text + "<br />" + json.results[i].created_at + '</p>' + json.results[i].geo.coordinates + '</span>');
                } else {
                    output.push('<p id="tweet"><img id="tweetImage" src="' + json.results[i].profile_image_url + '" width="48" height="48" /><span id="tweetText">' + '<a href="http://twitter.com/' + json.results[i].from_user + '">' + json.results[i].from_user + "</a> " + json.results[i].text + "<br />" + json.results[i].created_at + '</p>' + json.results[i].geo + '</span>');
                }
            }

            $("div.twitter2").html(output.join('')).slideDown('slow');
        });
    }


    var timer = setInterval(searchTweets, 20000);


    searchTweets();

});​

also to help heres a working jsfiddle http://jsfiddle.net/th3fallen/jc2Kf/

Answer 3

I think you are getting an issue because you are trying to concatenate an array with a string, what you may need to do is this:

...+"["+json.results[i].geo.coordinates[0]+","+json.results[i].geo.coordinates[1]+"]"+...

rather than just

...+json.results[i].geo.coordinates+...

---

or try this:

if (json.results[i].geo) console.log('<p id="tweet"><img id="tweetImage" src="' + json.results[i].profile_image_url + '" width="48" height="48" /><span id="tweetText">' + '<a href="http://twitter.com/' + json.results[i].from_user + '">' + json.results[i].from_user + "</a> " + json.results[i].text + "<br />" + json.results[i].created_at + '</p>' + "["+json.results[i].geo.coordinates[0]+","+json.results[i].geo.coordinates[1]+"]" + '</span>');

or even:

if (json.results[i].geo) console.log($('<p id="tweet"><img id="tweetImage" src="' + json.results[i].profile_image_url + '" width="48" height="48" /><span id="tweetText">' + '<a href="http://twitter.com/' + json.results[i].from_user + '">' + json.results[i].from_user + "</a> " + json.results[i].text + "<br />" + json.results[i].created_at + '</p>' + "["+json.results[i].geo.coordinates[0]+","+json.results[i].geo.coordinates[1]+"]" + '</span>'));

and make sure the html looks correct.

The other problem that i noticed is that you are closing your </span> tag before your </p> tag, which is not valid html. I dont think that is your problem (it might be?), but you should probably fix it.