JSON response not loading in list

Question

I try to load the values from JSON response into list , its not showing any values.Here my JSON request

 http://117.218.59.157:8080/WishList/ShowItems/userID=1 
 GET method

JSON response

Here my list code

  Ext.regModel('Filiale', {
                         fields: ['itemID', 'itemName', 'itemImage'],
                         });
  var tab= Ext.create('Ext.List', {
                                width: 320,
                                height: 290,
                                model: 'Filiale',
                                store: {
                                fields: ['itemName','itemImage'],
                                proxy: {
                                type: 'ajax',
                                method: 'GET',
                                url : 'http://117.218.59.157:8080/WishList/ShowItems/userID=1',
                                reader: {
                                type: 'json'
                                }
                                }
                                },
                                itemTpl: '<img src="{itemImage}" width="35" heigh="35"></img><span>&nbsp&nbsp&nbsp{itemName}'
                                });

I think problem with the syntax in list.Can any one please help me to solve

Answer 1

you had forgotten to set root property of the JSON reader. Therefore, the list component doesn't know where will start! You should return root property with JSON list like below:

{"items": 
  [{
    "itemID": "1",  
    "errorMsg": "",  
    "itemName": "Airplane",  
    "itemDesc": "Model NEW 2003"
   },
   {
    "itemID": "2",  
    "errorMsg": "",  
    "itemName": "Bike",  
    "itemDesc": "Model NEW 2003"
   }
  ]
}

Also make sure to set idProperty of JSON reader!

proxy: {
  type: 'ajax',
  url: 'http://117.218.59.157:8080/WishList/ShowItems/userID=1',
  method: 'GET'
},
reader: {
  type: 'json',
  root: 'items',
  idProperty: 'itemID'
}

Also, you didn't set model column types! Define model like below:

Ext.define('Filiale', {
extend: 'Ext.data.Model',
fields: [
    {name: 'itemID', type: 'int'},
    {name: 'itemName', type: 'string'},
    {....}
]

});