Using tumblr API (JSON) and $.getJSON to grab the most recent posts from my tumblr blog

I'm having trouble pulling in the content from my tumblr formatted as JSON. I registered an API key from tumblr, and have the right API link, but am missing something in the $.getJSON. Below I'll show what my JSON and my jQuery both look like.

Here's what my JSON looks like:

{
"meta": {
    "status": 200,
    "msg": "OK"
},
"response": {
    "blog": {
        "title": "BLOG TITLE",
        "name": "BLOG NAME",
        "posts": 96,
        "url": "http://BLOGTITLE.tumblr.com/",
        "updated": 1370605005,
        "description": "BLOG DESCRIPTION",
        "ask": false,
        "ask_anon": false,
        "is_nsfw": false,
        "share_likes": true,
        "likes": 0
    },
    "posts": [
        {
            "blog_name": "BLOG NAME",
            "id": 52373434879,
            "post_url": "POST URL",
            "slug": "POST SLUG",
            "type": "photo",
            "date": "2013-03-07 11:36:44 GMT",
            "timestamp": 1370605004,
            "state": "published",
            "format": "html",
            "reblog_key": "T0m0e51u",
            "tags": [],
            "short_url": "SHORT URL",
            "highlighted": [],
            "note_count": 1,
            "caption": "PHOTO CAPTION TEXT DESCRIPTION",
            "image_permalink": "http://BLOGTITLE.tumblr.com/image/52373434879",
            "photos": [
                {
                    "caption": "",
                    "alt_sizes": [
                        {
                            "width": 640,
                            "height": 960,
                            "url": "http://31.media.tumblr.com/.../...jpg"
                        },
                        {
                            "width": 500,
                            "height": 750,
                            "url": "http://31.media.tumblr.com/.../..._500.jpg"
                        },
                        {
                            "width": 400,
                            "height": 600,
                            "url": "http://24.media.tumblr.com/.../..._400.jpg"
                        },
                        {
                            "width": 250,
                            "height": 375,
                            "url": "http://31.media.tumblr.com/.../..._250.jpg"
                        },
                        {
                            "width": 100,
                            "height": 150,
                            "url": "http://24.media.tumblr.com/.../..._100.jpg"
                        },
                        {
                            "width": 75,
                            "height": 75,
                            "url": "http://24.media.tumblr.com/.../..._75sq.jpg"
                        }
                    ],
                    "original_size": {
                        "width": 640,
                        "height": 960,
                        "url": "http://31.media.tumblr.com/.../..._1280.jpg"
                    }
                }
            ]
        },

Here's what my jQuery looks like:

jQuery(document).ready(function(){
var url = "http://api.tumblr.com/v2/blog/BLOGNAME.tumblr.com/posts?api_key=APIKEY&limit=5";
var src;
var caption;

$.getJSON(url, function(results){
$.each(results.response, function(i,item){
    src = "posts.photos.alt_sizes.url";
    caption = posts.caption;
    $("<img/>").attr("src", src).appendTo("#submissions").wrap('<div class="postImage"></div>').after('<span class="postCaption">' + caption + '</div>');
});

HTML:

<div id="submissions"></div>

I am pretty sure that the problem is in the $.getJSON or $.each, but I can't figure out exactly what. Any help?

Thanks.

Solution

You are probably getting an error because you are trying to access the variable post which is not defined. And you are iterating over results.response, but it looks like you want to iterate over results.response.posts, which is an array of blog posts.

Furthermore, each post seems to have an photos array from which you have to choose the element with photo size you want to have.

Example:

$.each(results.response.posts, function(i, item){
    var src = item.photos[0].alt_sizes[0].url; // first picture, first size
    var caption = item.caption;
    $("<img/>").attr("src", src).appendTo("#submissions").wrap('<div class="postImage"></div>').after('<span class="postCaption">' + caption + '</div>');
});

Of course if a post doesn't have a photo and the array is empty, you will get a runtime error, but I assume you will account for these cases.

The other problem is that you cannot make an Ajax request to the tumblr API since it is an external domain. However, the tumblr API supports JSONP, so if you add &callback=? to the URL, you tell jQuery to use JSONP instead:

var url = "[...]/posts?api_key=APIKEY&limit=5&callback=?";

I recommend to read some basic JavaScript tutorials to learn how to work with arrays and objects: