1

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!

lisasy
  • 67
  • 8

2 Answers2

1

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

Titouan de Bailleul
  • 12,920
  • 11
  • 66
  • 121
  • Hello! Thank you so much for the tip. That seems to make sense now. I've tried to put that in. But rather than output the URL, what is happening in the browser is that it is outputting `[object Object]`. Got any idea what this could mean? – lisasy Nov 29 '12 at 15:19
  • I'll give it a try later. But do you need to store all these informations in store or do you actually only need the url of the picture ? Because if you only need the url of the pictures there is a much simpler way to get them – Titouan de Bailleul Nov 29 '12 at 15:32
  • I really only need the URL of the images -- the app will simply display thumbnails of images, and when any of them are clicked, the user will be directed to a larger, full-screen version of the image. Can you tell me about the easier way to accomplish this? I really appreciate your help! – lisasy Nov 29 '12 at 15:39
0

This was also a proper way:

        '<tpl for="photos[0].alt_sizes[0]">',
            '<img src="{url}" />',
        '</tpl>',
lisasy
  • 67
  • 8