JSON parser doesn't work

Question

For some reason my json twitter parser isn't working?

Anyone got any ideas as to why?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">

    function outputHtmlToDiv(tweet,i){
      count = i + 1;
      $('#wrapper #sidebar .profile').html('<img src="'+tweet.profile_image_url+'" alt="Pretty Klicks" />');
    }
        $(document).ready(function(){

        var url = 'http://twitter.com/statuses/user_timeline/prettyklicks.json?count=1';

            $.getJSON(url,function(json){
                $.each(json.user,function(i,tweet){
                  outputHtmlToDiv(tweet,i);
                });
              });

        });


</script>

Answer 1

Missing quote after '+tweet.profile_image_url+'

Try this:

$('#wrapper #sidebar .profile').html('<img src="'+tweet.profile_image_url+'" alt="Pretty Klicks" />');

Answer 2

Is that because you have unclosed quote after img/src?

Intead of:

$('#wrapper #sidebar .profile').html('<img src="'+tweet.profile_image_url+' alt="Pretty Klicks" />');

Try:

$('#wrapper #sidebar .profile').html('<img src="'+tweet.profile_image_url+'" alt="Pretty Klicks" />');

Answer 3

You need to use a JSONP callback parameter (see the documentation). With jQuery, you can just use a ? and it will generate a name:

var url = 'http://twitter.com/statuses/user_timeline/prettyklicks.json?count=1&callback=?';

Answer 4

You have a few errors, mainly you need &callback=? in the url, like this:

 var url = 'http://twitter.com/statuses/user_timeline/prettyklicks.json?count=1&callback=?';

Otherwise jQuery doesn't know to make a JSONP request (a normal XHR request is blocked cross-domain, complements of the same-origin policy). Also your get structure's a bit off, the base object is an array, overall it should look like this:

function outputHtmlToDiv(tweet, i) {
  count = i + 1;
  $('#wrapper #sidebar .profile').html('<img src="'+tweet.user.profile_image_url+'" alt="Pretty Klicks" />');
}
$(function(){
  var url = 'http://twitter.com/statuses/user_timeline/prettyklicks.json?count=1&amp;callback=?';
  $.getJSON(url,function(json){
    $.each(json,function(i,tweet){
      outputHtmlToDiv(tweet,i);
    });
  });
});​

You can test it out here, since json in the object above is an array of tweets, you need to loop through that array directly, json.user will be undefined (Array doesn't have a property called users), json[0].user however, is what you want.