Accessing and viewing nested JSON (Tumblr API) using Sencha Touch 2

Question

I am currently working on creating an image gallery using Sencha Touch 2 and Tumblr API to fetch the images from my Tumblr website. I am struggling a lot with accessing the JSON in the innermost nested folder -- that is what I need to display the URL of the image. I've looked at countless other tutorials and similar StackOverflow questions, but no solution so far has seemed to work. I was wondering if people can take a look at my code.

So the structure of the JSON file is this:

    {
    "meta": {
        "status": 200,
        "msg": "OK"
    },
   "response": {
        "blog": { ... },
        "posts": [
         {
             "blog_name": "derekg",
             "id": 7431599279,
             "post_url": "http:\/\/derekg.org\/post\/7431599279",
             "type": "photo",
             "date": "2011-07-09 22:09:47 GMT",
             "timestamp": 1310249387,
             "format": "html",
             "reblog_key": "749amggU",
             "tags": [],
             "note_count": 18,
             "caption": "<p>my arm is getting tired.<\/p>",
             "photos": [
             {
                   "caption": "",
                   "alt_sizes": [
                    {
                        "width": 1280,
                        "height": 722,
                        "url": "http:\/\/derekg.org\/photo\/1280\/7431599279\/1\/
                       tumblr_lo36wbWqqq1qanqww"
                    },
                    {
                       "width": 500,
                        "height": 282,
                       "url": "http:\/\/30.media.tumblr.com\/
                       tumblr_lo36wbWqqq1qanqwwo1_500.jpg"
                    },

So I am essentially trying to access response > posts > photos > alt_sizes > url . Yep, very nested. With what I'm been doing I've been able to get down to the alt_sizes nest, but I need to be able to reach down to just one level more to get the url so that I can put it in the tag <img src="{url}"/> to display the images on the Sencha Touch 2 window...

I'm going to include the code for my Store, Model, and View.

Here is the Store (PhotoStore.js):

  Ext.define("tumblrPhotos.store.PhotoStore", {
extend: 'Ext.data.Store',
requires: [
        'Ext.data.proxy.JsonP',
        'tumblrPhotos.model.PostsModel',
    ],
config: {
    model: 'tumblrPhotos.model.PostsModel',
    autoLoad: true,
    proxy: {
        type: 'jsonp',
        url: 'http://api.tumblr.com/v2/blog/lisacanblog.tumblr.com/posts/photo?api_key=HssV7DgyS8RtT0uYE5qpSQJwSxs6nIWpx06mMt8kNprCGQqIo8&callback=Ext.util.JSONP.callback',
        reader: {
            callbackKey: 'callback',
            type: 'json',
            rootProperty: 'response.posts'
        }
    }
}
});

Here is the Model (PostsModel.js):

    Ext.define("tumblrPhotos.model.PostsModel", {
extend: 'Ext.data.Model',
config: {
    fields:[ //all the fields of posts BESIDES hasMany (photos)
        {name:'blog_name'},
        {name:'id'},
        {name:'post_url'},
        {name:'type'},
        {name:'date'},
        {name:'timestamp'},
        {name:'caption'}
    ],

    hasMany: {
        model: 'PhotoModel',
        name: 'photos',
        associationKey: 'photos'
    }

}
});

Ext.define("PhotoModel", {
extend: 'Ext.data.Model',
config: { 

    fields:[ //all the fields of photos BESIDES hasMany(alt_sizes)
        {name:'caption'},
        {name:'alt_sizes'}
    ],

    hasMany: { 
        model: 'AltSizesModel',
        name: 'alt_sizes',
        associationKey: 'alt_sizes'
    },

    belongsTo: [{
        model:'tumblrPhotos.model.PostsModel',
        name: 'photos'
    }]

}
});

Ext.define("AltSizesModel", {
extend: 'Ext.data.Model',
config: {
    fields:[
        {name:'width'},
        {name:'height'},
        {name:'url'}
    ],
    belongsTo: [{
        model: 'PhotoModel',
        name: 'alt_sizes'
    }]
}
});

And lastly, here is the View (GalleryView.js):

    Ext.define("tumblrPhotos.view.GalleryView", {
extend: 'Ext.dataview.DataView',
xtype:'galleryview',
requires: [
        'tumblrPhotos.store.PhotoStore',
    ],
config: {
    title: 'Gallery',
    id: 'gallerypanel',
    iconCls: 'star',
    iconMask: true,
    store: 'PhotoStore',
    styleHTMLContent: true,
    scrollable: 'vertical',
    itemTpl: new Ext.XTemplate (
        '<div>',
        '{blog_name}',
        '{photos}',
        '<tpl for="photos">',
        '{alt_sizes.url}',
        '<p>hi</p>',
        '</tpl>',
        '<hr>',
        '</div>'
    )
}
});

In my View file, this doesn't work:

        '<tpl for="photos">',
          '{alt_sizes.url}',
          '<p>hi</p>',
        '</tpl>',

... But does does:

        '<tpl for="photos">',
          '{alt_sizes}',
          '<p>hi</p>',
        '</tpl>',

The latter option outputs [object OBJECT] for the alt_sizes, so I know it is passing through. Can somebody help me so that I can output the url under the alt_sizes nest? Thank you very much!

Do you need to store all these informations in store or do you actually only need the url of the picture ? — Titouan de Bailleul

Titouan de Bailleul Titouan de Bailleul · Accepted Answer · 2012-11-29T14:50:21

That's because alt_sizes is an array an not an object so you can't actually do

alt_sizes.url

but you should do

alt_sizes[0].url

or alt_sizes[1].url for another size.

Update

If you only need to get the URLs of the picture then you just need to do an Ext.data.JSONP.request :

I created an example here from your case

Hope this helped

Accessing and viewing nested JSON (Tumblr API) using Sencha Touch 2

Here is the Store (PhotoStore.js):

Here is the Model (PostsModel.js):

And lastly, here is the View (GalleryView.js):

2 Answers