使用 Sencha Touch 2 访问和查看嵌套 JSON (Tumblr API)

Question

我目前正在使用 Sencha Touch 2 和 Tumblr API 创建一个图片库，以从我的 Tumblr 网站获取图片。 我在访问最里面的嵌套文件夹中的 JSON 时遇到了很多困难——这就是我显示图像 URL 所需要的。我查看了无数其他教程和类似的 StackOverflow 问题，但是到目前为止，似乎没有任何解决方案有效。我想知道人们是否可以看看我的代码。

所以JSON文件的结构是这样的：

    {
    "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"
                    },

所以我实际上是在尝试访问 response > posts > photos > alt_sizes > url 。是的，非常嵌套。通过我一直在做的事情，我已经能够到达alt_sizes 巢穴，但我需要能够再到达一层才能获得url，这样我才能把它放在标记<img src="{url}"/> 以在 Sencha Touch 2 窗口上显示图像...

我将包含我的商店、模型和视图的代码。

这里是商店 (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'
        }
    }
}
});

这是模型 (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'
    }]
}
});

最后，这里是视图 (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>'
    )
}
});

在我的 View 文件中，这不起作用：

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

...但确实如此：

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

后一个选项为alt_sizes 输出[object OBJECT]，所以我知道它正在通过。有人可以帮助我，以便我可以在 alt_sizes 嵌套下输出 url 吗？非常感谢！

Answer 1

那是因为 alt_sizes 是一个数组而不是一个对象，所以你实际上不能这样做

alt_sizes.url 

但你应该这样做

alt_sizes[0].url

或alt_sizes[1].url 选择其他尺寸。

更新

如果你只需要获取图片的网址，那么你只需要做一个Ext.data.JSONP.request：

I created an example here from your case

希望这有帮助

Answer 2

这也是一个正确的方法：

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