Search code examples
youtube-apisencha-touchsencha-touch-2youtube-javascript-api

youtube api v3 CORS support in sencha touch 2


Using Sencha Touch, How do we query youtube v3 search api? Below is the sample url which works fine when issued from a browser directly (NOTE: Key is required) : "https://www.googleapis.com/youtube/v3/search?part=snippet&order=date&type=video&channelId=UC3djj8jS0370cu_ghKs_Ong&key=MY_KEY"

However the same url fails when loaded using sencha touch Store ajax proxy. It seems that OPTIONS call is made against this URL and GET was aborted.

What is needed in Sencha touch store for working with youtube V3 google apis? I did not find jsonp support for youtube V3 api.


Solution

  • I have used this api like this,

    proxy: {
                type: 'ajax',
                url: 'https://www.googleapis.com/youtube/v3/search',
                useDefaultXhrHeader: false,
                extraParams: {
                    part: 'snippet',
                    q: 'ambarsariya',
                    regionCode: 'IN',
                    maxResults: 30,
                    key: 'your_key'
                },
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
    

    One more thing you have to do and thats is you have set a idProperty in the model of this store. Inside config of the model used I have used

    idProperty: 'videoId',// its better if this name is not same as any fields name
            fields: [{
                name: 'snippet'
            }, {
                name: 'thumbnail',
                mapping: 'snippet.thumbnails.default.url'
            }, {
                name: 'title',
                mapping: 'snippet.title'
            }]
    

    Hope this solves your problem.