1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    mack30 is on a distinguished road

      0  

    Default Unanswered: JSONReader and anonymous parent array

    Unanswered: JSONReader and anonymous parent array


    I've not been able to determine how to read the following server data via a json reader and display it in a list.

    The server data is a single element anonymous array that wraps an array of Message. I am interested in the inner Message array.
    Code:
    [
        {"Message": 
          [
            {
                "messageID": "1",
                "title": "Alpha"
            },
            {
                "messageID": "2",
                "title": "Beta"
            }    
          ]
        }
    ]
    I am using the Tweets page of the Sencha Touch O'Reilly example as the base of my experiments. The view look likes this:
    Code:
            itemTpl: Ext.create('Ext.XTemplate',
                    'hello ',
                     '<h2>{messageID} {title}</h2>'
            )
    and the Store looks like this:
    Code:
    Ext.define('Oreilly.store.Tweets', {
        extend: 'Ext.data.Store',
    
    
        config: {
            fields: ['messageID',  'title'],
            proxy: {
                type: 'ajax',
                url: 'http://myserver/messages',
                headers: {
                    'MyHeader': 'abc123'
                },
                cors: true,
    
    
                reader: { 
                    type: 'json', 
                    //rootProperty: 'Message' 
                    rootProperty: 'dummy[0].Message' 
                } 
    
    
            }
        }
    });
    Any help will be appreciated.

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Try:

    Code:
    root: '[0].Message'

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    mack30 is on a distinguished road

      0  

    Default


    thanks for the reply skirtle, but no luck with the
    root: '[0].Message'

  4. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Let have a try:
    Code:
    Ext.define('Oreilly.store.Tweets', {
        extend: 'Ext.data.Store',
        fields: ['messageID',  'title'],
        proxy: {
            type: 'ajax',
            url: 'http://myserver/messages',
            headers: {
                'MyHeader': 'abc123'
            },
            cors: true,
            reader: { 
                type: 'json', 
                getResponseData: function(response) {
                    data = Ext.decode(response.responseText);
                    return data ? data[0].Message : {};
                }
            } 
        }
    });

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    mack30 is on a distinguished road

      0  

    Default Cross-domain issue ?

    Cross-domain issue ?


    It seems that the getResponseData function is not entered. I added some alerts and a breakpoint.
    Code:
                reader: { 
                    type: 'json', 
                    getResponseData: function(response) {
                        alert('response: '+ response)
                        data = Ext.decode(response.responseText);
                        alert('data: '+ data)
                        return data ? data[0].Message : {};
                    }
                } 
    
    There are two servers involved. One for the web app and another for the ajax data. Both servers belong to us but it is a cross domain call.

    Does the cross domain aspect play into this issue?
    I know that the data is retrieved from the server as I am monitoring via Fiddler2.

    I first see the OPTIONS request go out - a response of 200 is returned
    next the GET is issued - the response is 200 and I see my data (on the Fiddler console)

  6. #6
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Make sure that your data is successfully loaded from server. I have tested this code successfully with an exception is that data is loaded from the same domain not cross domain.

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    mack30 is on a distinguished road

      0  

    Default


    Thanks vietits. Do you have any hints on how to confirm that the data is being loaded?
    i.e. where might I put down some breakpoints?

    I know that the data is returned from the server because I see it in the Fiddler2 console.

    My testing has been with Win7 Safari.

  8. #8
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    mack30 is on a distinguished road

      0  

    Default Data visible in debugger -

    Data visible in debugger -


    senchaline32351.jpg

  9. #9
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Seems you're using Sencha Touch, not ExtJS 4. You did mention this in your original post but I missed it. Please post your question in the Touch forums.