Getting Instagram API to display?

[appnewbie]

Hi,

I'm having trouble getting a JSONP query to the Instagram API to display the photos returned. I'm not sure if it's an issue with the callback (which I don't really understand), or if it's to do with how I'm specifying the fields under config?

The code I'm using is adapted from what I was using for a Flickr example (which was working fine), but I guess the different structure of the Instagram API is tripping me up.

Here is the (non-working) code as it stands:

/**
 * This examples illustrates the 'List Paging' and 'Pull Refresh' plugins
 */
Ext.setup({
    requires: [
        'Ext.data.Store',
        'Ext.List'
    ],

    glossOnIcon: false,
    icon: {
        57: 'resources/icons/icon.png',
        72: 'resources/icons/icon@72.png',
        114: 'resources/icons/icon@2x.png',
        144: 'resources/icons/icon@114.png'
    },

    phoneStartupScreen: 'resources/loading/Homescreen.jpg',
    tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',

    onReady: function() {

        Ext.define('TweetStore', {
            extend: 'Ext.data.Store',

            config: {
            
                fields: ['images.standard_resolution.url'],
      
                autoLoad: true,

                proxy: {
                    type: 'jsonp',
                    url:'https://api.instagram.com/v1/media/search?lat=48.858844&lng=2.294351&client_id=KEYHERE',
                    callbackKey: 'jsoncallback',
                         
                    reader: {
                        type: 'json',
                        rootProperty: 'data'
                    }
                }
            }
        });


        Ext.define('TweetList', {
            extend: 'Ext.List',

            config: {
                store: Ext.create('TweetStore'),
                limit: 5,
                disableSelection: true,

                plugins: [
                    { xclass: 'Ext.plugin.ListPaging', 
                    autoPaging: true },
                    { xclass: 'Ext.plugin.PullRefresh' }
                ],

                emptyText: '<p class="no-searches">No tweets found matching that search</p>',

                itemTpl: Ext.create('Ext.XTemplate',
                    '<div class="tweet">',
                    '<span "><img src="{images.standard_resolution.url}"></span>',
                    '</div>',
                         {
        
                    linkify: function(value) {

                value = value.replace(/(http:\/\/[^\s]*)/g, "<a class=\"text\" target=\"_blank\" href=\"$1\">$1</a>");
                value = value.replace(/(^|\s)@(\w+)/g, "<a class=\"text\" target=\"_blank\" href=\"http://www.twitter.com/@$2\"> @$2</a>");
                value = value.replace(/(^|\s)#(\w+)/g, "<a class=\"text\" target=\"_blank\" href=\"http://twitter.com/#!/search/%23$2\"> #$2</a>");
                
                return value;
        }, 
        


        
    },
                    

                    {
                        
                        
                    }
                )
            }
        });





            
                        var view = Ext.create('Ext.NavigationView', {
    fullscreen: true,

    items: [{
        title: 'First',
        items: [{
            xtype: 'button',
            text: 'Push a new view!',
            handler: function() {
                //use the push() method to push another view. It works much like
                //add() or setActiveItem(). it accepts a view instance, or you can give it
                //a view config.
                view.push(
                {
                         xtype: 'container',
            xclass: 'TweetList',
            fullscreen: true,
            
            
                });
            }
        }]
    }]
});            
            
            

            
            
            
        }
    
});

Is the problem in how I'm trying to drill down to the image URL field?

I have rootProperty: 'data'
and

fields: ['images.standard_resolution.url'],

which I then reference in the itemTpl:

'<span "><img src="{images.standard_resolution.url}"></span>',

I thought maybe I was meant to map the fields like this, but it still doesn't work -

fields: [
{name: "standard_res_url", type: "string", mapping: "images.standard_resolution.url"}],

'<span "><img src="{standard_res_url}"></span>',


Or maybe the problem is with me the callback? -

callbackKey: 'jsoncallback',

Any help much appreciated!

Cheers.

[appnewbie]

The data from the Instagram API I'm trying to display via JSONP -


[CODE]HTTP/1.1 200 OK
Content-Language:
en
X-Ratelimit-Limit:
5000
Vary:
Accept-Language, Cookie
Date:
Tue, 17 Apr 2012 01:00:53 GMT
Content-Length:
15308
X-Ratelimit-Remaining:
4984
Content-Type:
application/json; charset=utf-8
Connection:
close
Server:
nginx/0.8.54

{
"meta": {
"code": 200
},
"data": [
{
"tags": [],
"location": {
"latitude": 48.85983,
"longitude": 2.28138
},
"comments": {
"count": 0,
"data": []
},
"filter": "Normal",
"created_time": "1334623873",
"link": "http://instagr.am/p/JgFQiUr-Id/",
"likes": {
"count": 1,
"data": [
{
"username": "raerae14209",
"profile_picture": "http://images.instagram.com/profiles/profile_27031236_75sq_1334351060.jpg",
"id": "27031236",
"full_name": "raerae14209"
}
]
},
"images": {
"low_resolution": {
"url": "http://distilleryimage9.instagram.com/6e429950882711e1a9f71231382044a1_6.jpg",
"width": 306,
"height": 306
},
"thumbnail": {
"url": "http://distilleryimage9.instagram.com/6e429950882711e1a9f71231382044a1_5.jpg",
"width": 150,
"height": 150
},
"standard_resolution": {
"url": "http://distilleryimage9.instagram.com/6e429950882711e1a9f71231382044a1_7.jpg",
"width": 612,
"height": 612
}
},
"caption": {
"created_time": "1334623882",
"text": "HAHA this picture always gets me",
"from": {
"username": "teddda",
"profile_picture": "http://images.instagram.com/profiles/profile_15163063_75sq_1323594621.jpg",
"id": "15163063",
"full_name": "Terra Lampi"
},
"id": "171159987977970423"
},
"type": "image",
"id": "171159912438555165_15163063",
"user": {
"username": "teddda",
"website": "",
"bio": "I enjoy seeing things from the perspective of others

[appnewbie]

Just got it working, I had to map the fields and also delete the callbackKey: 'jsoncallback',

here's the working code:

/**
 * This examples illustrates the 'List Paging' and 'Pull Refresh' plugins
 */
Ext.setup({
    requires: [
        'Ext.data.Store',
        'Ext.List'
    ],

    glossOnIcon: false,
    icon: {
        57: 'resources/icons/icon.png',
        72: 'resources/icons/icon@72.png',
        114: 'resources/icons/icon@2x.png',
        144: 'resources/icons/icon@114.png'
    },

    phoneStartupScreen: 'resources/loading/Homescreen.jpg',
    tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',

    onReady: function() {

        Ext.define('TweetStore', {
            extend: 'Ext.data.Store',

            config: {
            
                fields: [
        {name: "standard_res_url", type: "string", mapping: "images.standard_resolution.url"}],
      
                autoLoad: true,

                proxy: {
                    type: 'jsonp',
                    url:'https://api.instagram.com/v1/media/search?lat=48.858844&lng=2.294351&client_id=YOURKEY',
               
                         
                    reader: {
                        type: 'json',
                        rootProperty: 'data'
                    }
                }
            }
        });


        Ext.define('TweetList', {
            extend: 'Ext.List',

            config: {
                store: Ext.create('TweetStore'),
                limit: 5,
                disableSelection: true,

                plugins: [
                    { xclass: 'Ext.plugin.ListPaging', 
                    autoPaging: true },
                    { xclass: 'Ext.plugin.PullRefresh' }
                ],

                emptyText: '<p class="no-searches">No tweets found matching that search</p>',

                itemTpl: Ext.create('Ext.XTemplate',
                    '<div class="tweet">',
                    '<span "><img src="{standard_res_url}"></span>',
                    '</div>',
                         {
        
                    linkify: function(value) {

                value = value.replace(/(http:\/\/[^\s]*)/g, "<a class=\"text\" target=\"_blank\" href=\"$1\">$1</a>");
                value = value.replace(/(^|\s)@(\w+)/g, "<a class=\"text\" target=\"_blank\" href=\"http://www.twitter.com/@$2\"> @$2</a>");
                value = value.replace(/(^|\s)#(\w+)/g, "<a class=\"text\" target=\"_blank\" href=\"http://twitter.com/#!/search/%23$2\"> #$2</a>");
                
                return value;
        }, 
        


        
    },
                    

                    {
                        
                        
                    }
                )
            }
        });





            
                        var view = Ext.create('Ext.NavigationView', {
    fullscreen: true,

    items: [{
        title: 'First',
        items: [{
            xtype: 'button',
            text: 'Push a new view!',
            handler: function() {
                //use the push() method to push another view. It works much like
                //add() or setActiveItem(). it accepts a view instance, or you can give it
                //a view config.
                view.push(
                {
                         xtype: 'container',
            xclass: 'TweetList',
            fullscreen: true,
            
            
                });
            }
        }]
    }]
});            
            
            

            
            
            
        }
    
});