1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
    Ian Sorbello is on a distinguished road

      0  

    Default Answered: Array of JSON data but reader only reading first record

    Answered: Array of JSON data but reader only reading first record


    Hello all,

    I hope someone can help me figure out why my JSON reader attached to a list widget (which contains an array of two items) only loads 1 result. I have a much larger JSON data set (hundreds of "rows"), but I've used a simple one here to illustrate...

    This is the JSON

    Code:
    {
     "event" :
     [
        {
          "id": {
            "$t": "hi"
          }
        },
        {
          "id": {
            "$t": "there"
          }
        }
     ]
     }
    This is the Data Model:

    Code:
    Ext.define('HistoryItem', {
        extend: 'Ext.data.Model',
        fields: [{name:'name', mapping:'id.$t'}]
    });
    And here is my list widget with associated store:


    Code:
                    id: 'HistoryList',
                        xtype: 'list',
                        title: 'Trans History',
                        iconCls: 'star',
                        itemTpl: '{name}',
                        store: new Ext.data.Store ({
                            model: 'HistoryItem',
                            autoLoad: true,
                            proxy: {
                                type: 'ajax',
                                url: 'places.json',
                                reader: {
                                    type: 'json',
                                    root: 'event'
                                }
                            },
                            listeners: {
                                load: function(){
                                   console.log(this.getRange());
                                }
                             }
                        })
    I just don't get it, but when the store loads, it will only return the first item in the JSON. The second is ignored, and my list only displays one item.

    Any clues??

    Thanks very much!!,
    Ian.

  2. This was something I have never seen before but makes sense now. Each Model definition has idProperty set to 'id' and since you were using 'id' in your response it was trying to use that field as the id of that record. Both records were loaded except there was an index of 0 and -1 so therefor it looked like there was only one. I changed the idProperty on the Model definition to something else and it worked no problem:

    Code:
    Ext.define('HistoryItem', {
        extend     : 'Ext.data.Model',
        idProperty : 'nameId',
        fields     : [
            { name : 'name', mapping : 'id.$t' }
        ]
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This was something I have never seen before but makes sense now. Each Model definition has idProperty set to 'id' and since you were using 'id' in your response it was trying to use that field as the id of that record. Both records were loaded except there was an index of 0 and -1 so therefor it looked like there was only one. I changed the idProperty on the Model definition to something else and it worked no problem:

    Code:
    Ext.define('HistoryItem', {
        extend     : 'Ext.data.Model',
        idProperty : 'nameId',
        fields     : [
            { name : 'name', mapping : 'id.$t' }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Answers
    148
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi Ian,
    to solve this issue I suggest you to set the "record" config to "id" on your store reader and change the field mapping as follows:

    Code:
    Ext.setup({
    
    
        onReady: function() {
    	    
    	    Ext.define('HistoryItem', {
    		    extend: 'Ext.data.Model',
    		    fields: [
    		        {name:'name', mapping:'$t'}
    		    ]
    		});
    		
            var store = Ext.create('Ext.data.Store', {
                 model: 'HistoryItem',
                 autoLoad: true,
                 proxy: {
                     type: 'ajax',
                     url: 'places.json',
                     reader: {
                         type: 'json',
                         root: 'event',
                         record: 'id'
                     }
                 },
                 listeners: {
                     load: function(){
                        console.log(this.getRange());
                     }
                  }
            });
    
    
            var list = Ext.widget('list', {
    	     fullscreen: true,
    	     title: 'Trans History',
                 iconCls: 'star',
                 itemTpl: '{name}',
                 store: store
            });
    
    
        }
    
    
    });
    And everything will works fine!

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  5. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
    Ian Sorbello is on a distinguished road

      0  

    Thumbs up 'id' property in the JSON

    'id' property in the JSON


    Thanks very much for you help guys! I spent hours on this problem last night and just couldn't make it work.
    Setting the idProperty to something different so it doesn't get confused with my JSON 'id' property is something I will definitely keep in mind in the future!

    I'm sure it's not the only JSON with an 'id' property in it!!

    Thanks again!!

  6. #5
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    Dundas, Ontario, Canada
    Posts
    82
    Vote Rating
    -4
    rgporter can only hope to improve

      0  

    Default


    I'm having this same problem on ST 1.x. The fix doesn't seem to directly translate over, is there any chance someone could post the 1.x equivalent?