Sencha Touch2: cannot Parse Json file inside store

Question

I am new to Sencha Touch2. am facing problem while loading nested data from Json file. This is my json file:

{
   "html_attributions" : [
      "Listings by \u003ca href=\"http://www.yellowpages.com.au/\"\u003eYellow Pages\u003c/a\u003e"
   ],
   "results" : [
      {
         "geometry" : {
            "location" : {
               "lat" : -33.8711140,
               "lng" : 151.1990420
            }
         },
         "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/travel_agent-71.png",
         "id" : "ddd678ac0a16d83fdc25500ccb3d6aa27b7f5548",
         "name" : "Darling Harbour",
         "photos" : [
            {
               "height" : 1088,
               "html_attributions" : [
                  "\u003ca href=\"https://plus.google.com/117001986278088134060\"\u003eStephen SteveT\u003c/a\u003e"
               ],
               "photo_reference" : "CnRiAAAAyl02-KJEBTh19Pc4YuOhMn0DPYLCat_1HMSwX_icBwgyjWr7QGkT262oE57hMlOUypibloD1oFwxBJ8Iq3oJCLKBNXcyAmw7000P91LblItAcxuVyvltfRggSLwT36pooEmZiKITyEuwAmpKpGrxhRIQhyMbZ-cHFI6zSayNRRiH_BoUgWH-2M6mR1IO9MuftuuYkZRHUZ4",
               "width" : 1600
            }
         ],
         "rating" : 4.30,
         "reference" : "CnRtAAAAmNBHFs0qF9UJEw1NccjMySkm4aH3cEL6cCkLj-V4rkDJJE81-fFOar6PAtoK5d70GLJTgh_LcpysxH41iRI4hW3YreiPI66GBJYEeWA6SbgNQrJy6RbTw7LbhB6vYb3gfzpV2lE6fUtaIjx3WOLjsBIQVjFdJTUy55L1fzdzyufUaBoU194V7aIidzGbj7aRUaObJdl5GvM",
         "types" : [ "travel_agency", "cafe", "restaurant", "food", "establishment" ],
         "vicinity" : "Sydney"
      },
      {
         "geometry" : {
            "location" : {
               "lat" : -33.870540,
               "lng" : 151.1988150
            }
         },.........

here am able to get data of icon, id, name. i followed a tutorial. but how can i read data inside 'location' of 'lat' and 'lng'. the below is my store.

Ext.define('CustomList.store.StoreList', {
    extend:'Ext.data.Store',
    requires:['Ext.data.reader.Json','Ext.data.proxy.JsonP'],
    config:{
        model:'CustomList.model.ModelList',
        autoLoad:'true',
        proxy:{
            type:'ajax',
       url:'http://localhost:9091/Json/sample.json',

            reader:{
                type:'json',
                rootProperty:'results'
                }
        }
    }
});

This is my model:

Ext.define('CustomList.model.ModelList', {
    extend: 'Ext.data.Model',
    config: {
        fields:['geometry.location.lat','geometry.location.lng']

    }})

This is my list: ShowList.js:

Ext.define('CustomList.view.ShowList',{
    extend:'Ext.Panel',
    xtype:'showList',
    config:{
        layout:'fit',
        styleHtmlContent:'true',
        styleHtmlCls:'showListCls',
        items:[
            {
                xtype:'list',
                id: 'listitems',
                store:'StoreList',
//                itemTpl:'{id},{name},{vicinity}'
                itemTpl:'{modelList.geometry.location.lat} {modelList.geometry.location.lng}'

               }]


    }
});

Can any one please help me. Thanks.

Titouan de Bailleul Titouan de Bailleul · Accepted Answer · 2013-03-19T07:14:15

From the documentation

rootProperty : String The name of the property which contains the Array of row objects. For JSON reader it's dot-separated list of property names.

In your code you're setting the rootProperty to geometry so I guess the reader is gonna think that all the data is in the first geometry attribute.

One solution would be to set your rootProperty to results, set the field config of your model to fields:['geometry'] and access the lat and lng like this

yourModelInstance.geometry.location.lat;
yourModelInstance.geometry.location.lng;

Hope this helps

Sencha Touch2: cannot Parse Json file inside store

1 Answers