Array of JSON data but reader only reading first record

[Ian Sorbello]

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

{
 "event" :
 [
    {
      "id": {
        "$t": "hi"
      }
    },
    {
      "id": {
        "$t": "there"
      }
    }
 ]
 }

This is the Data Model:

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

And here is my list widget with associated store:

                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.

[mitchellsimoens]

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:

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

[AndreaCammarata]

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:

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.

[Ian Sorbello]

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!!

[rgporter]

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?