How do display a var with json and jquery?

Question

Here's my code, its based off the flickr example, as I am trying to learn how to use JSON. My Question:

How do I get the var title to show up correctly in HTML, I am still new to programming trying to teach my self.

I am getting [object object] which I think means its not a string. Not sure how to write it as one, probably really simple but beyond me.

Thank You!

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cats&tagmode=any&format=json&thumb_size=s&jsoncallback=?",
             function(data){
              var title = $(this).children('.title');
           $.each(data.items, function(i,item){
                var content = '<li>';
                content += '<p class="title"> <a href="' + item.link + '">' + item.title + '</a></p>'
                 content += '<img width="133" height="100" class="prettyPhoto" src="' +  item.media.m + '"/>';
                 content += '<p class="date">' + title + '</p>'
                 content += '</li>';
        $(content).appendTo("#recent-photos");
        if ( i == 15 ) return false;
               });
             });

Update:

Example of the JSON I am using: I am targeting all of the "items" children

({
     "title": "Recent Uploads tagged cats",
     "link": "http://www.flickr.com/photos/tags/cats/",
     "description": "",
     "modified": "2009-07-09T16:50:47Z",
     "generator": "http://www.flickr.com/",
     "items": [
       {
      "title": "Beautiful Downtown Gary, Indiana.",
      "link": "http://www.flickr.com/photos/fotomard/3704818882/",
      "media": {"m":"http://farm3.static.flickr.com/2506/3704818882_8a8e793e47_m.jpg"},
      "date_taken": "2009-06-27T17:21:05-08:00",
      "description": "<p><a href=\"http://www.flickr.com/people/fotomard/\"&gt;fotomard&lt;\/a&gt; posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/fotomard/3704818882/\" title=\"Beautiful Downtown Gary, Indiana.\"><img src=\"http://farm3.static.flickr.com/2506/3704818882_8a8e793e47_m.jpg\" width=\"160\" height=\"240\" alt=\"Beautiful Downtown Gary, Indiana.\" /><\/a><\/p> <p>Backstage at the Palace Theater<\/p>",
      "published": "2009-07-09T16:50:47Z",
      "author": "[email protected] (fotomard)",
      "author_id": "51533956@N00",
      "tags": "urban cats house church wet beautiful nude theater downtown decay indiana palace crack abandon drugs gary dilapidation trap trespassing dilapitation"
       }

Update 2: Ran json2.js

I am getting: Does this mean I need to decode it, or am I just targeting it wrong?

{"length":0,"prevObject":{"length":1,"0":{"type":"GET","url":"http://api.flickr.com/services/feeds/photos_public.gne?tags=cats&tagmode=any&format=json&thumb_size=s&jsoncallback=jsonp1247160045746&_=1247160045957","data":null,"dataType":"script","global":true,"contentType":"application/x-www-form-urlencoded","processData":true,"async":true,"accepts":{"xml":"application/xml, text/xml","html":"text/html","script":"text/javascript, application/javascript","json":"application/json, text/javascript","text":"text/plain","_default":"*/*"},"cache":false}},"selector":".children(undefined)"}

Answer 1

if you are using Firefox and Firebug you can do:

console.log(data);

in the each() call to see how the data is structured. And you title var should be local inside the each() call.

var title = item.title;

or

var title = $(item).children().attr('title'); // depens on how the data is structured

Answer 2

Your best bet is to include the json2.js file and call stringify():

alert(JSON.stringify(data));

That way you'll see what gets returned by the ajax call.

Answer 3

I figured it out, by placing the var inside the each, I was able to get it. Working