JSON Data in Sencha Touch

Question

I am currently playing with Sencha Touch, and I'm trying to get data from a drupal installation using JSON Views. I've looked at the Sencha API documentation, but can't get it to work.

My Json response is the following:

{
  "spots" : [
    {
      "spot" : {
        "nid" : "10",
        "created" : "1288868246",
        "title" : "Almanarre",
        "type" : "spot",
        "city" : "Hyères",
        "country" : "fr",
        "latitude" : "43.083433",
        "longitude" : "6.148224"
      }
    },
    {
      "spot" : {
        "nid" : "11",
        "created" : "1288956341",
        "title" : "Lac de Neuchâtel",
        "type" : "spot",
        "city" : "Dakhla",
        "country" : "ma",
        "latitude" : "23.866295",
        "longitude" : "-15.738344"
      }
    },
    {
      "spot" : {
        "nid" : "12",
        "created" : "1288958572",
        "title" : "Zurich",
        "type" : "spot",
        "city" : "Zurich",
        "country" : "ch",
        "latitude" : "0.000000",
        "longitude" : "0.000000"
      }
    },
    {
      "spot" : {
        "nid" : "13",
        "created" : "1289302233",
        "title" : "Berne",
        "type" : "spot",
        "city" : "Berne",
        "country" : "ch",
        "latitude" : "46.947999",
        "longitude" : "7.448148"
      }
    },
    {
      "spot" : {
        "nid" : "14",
        "created" : "1290266721",
        "title" : "Dakhla",
        "type" : "spot",
        "city" : "Rio de Janeiro",
        "country" : "br",
        "latitude" : "-22.903539",
        "longitude" : "-43.209587"
      }
    },
    {
      "spot" : {
        "nid" : "15",
        "created" : "1299172773",
        "title" : "Paje",
        "type" : "spot",
        "city" : "Paje",
        "country" : "tz",
        "latitude" : "-6.265646",
        "longitude" : "39.535332"
      }
    }
  ]
}

And my Model/Store/List :

Ext.regModel( 'Spot', {
            idProperty: 'id',
            fields : [
                { name: 'id', type: 'int'},
                { name: 'date', type: 'date', dateFormat: 'c' },
                { name: 'title', type: 'string'},
                { name: 'type', type: 'string'},
                { name: 'country', type: 'string'},
                { name : 'city', type: 'string' },
                { name : 'lat', type: 'string' },
                { name: 'long', type: 'string'}
            ]
        }); // Model


        Ext.regStore('spotStore', {
            model: 'Spot',
            proxy: {
                type: 'ajax',
                url: '/api/spots/',
                reader: {
                    type: 'json',
                    root: 'spots'
                },
                autoload: true
            }
        });
ks.views.spotsList = new Ext.List({
            id: 'spotsList',
            store: 'spotStore',
            itemTpl: '<div class="list-item-title">{title}</div>' + '<div class="list-item-narrative">{country}</div>',
            onItemDisclosure: function(record){

            },
            listeners: {
                'render': function (thisComponent) {
                    thisComponent.getStore().load();
                }
            }
        });

The call is made, it creates the list with an accurate number of 6 items. But I can't make the variables in the itemTpl show up...

Any ideas ?

Thanks a lot !

Answer 1

The problem is with the root variable you have mentioned while creating the store. I suggest some changes in the Json format ie

{
    "spots": [
        {
            "nid": "10",
            "created": "1288868246",
            "title": "Almanarre",
            "type": "spot",
            "city": "Hyères",
            "country": "fr",
            "latitude": "43.083433",
            "longitude": "6.148224"
        },
        {
            "nid": "11",
            "created": "1288956341",
            "title": "Lac de Neuchâtel",
            "type": "spot",
            "city": "Dakhla",
            "country": "ma",
            "latitude": "23.866295",
            "longitude": "-15.738344"
        },
        {
            "nid": "12",
            "created": "1288958572",
            "title": "Zurich",
            "type": "spot",
            "city": "Zurich",
            "country": "ch",
            "latitude": "0.000000",
            "longitude": "0.000000"
        },
        {
            "nid": "13",
            "created": "1289302233",
            "title": "Berne",
            "type": "spot",
            "city": "Berne",
            "country": "ch",
            "latitude": "46.947999",
            "longitude": "7.448148"
        },
        {
            "nid": "14",
            "created": "1290266721",
            "title": "Dakhla",
            "type": "spot",
            "city": "Rio de Janeiro",
            "country": "br",
            "latitude": "-22.903539",
            "longitude": "-43.209587"
        },
        {
            "nid": "15",
            "created": "1299172773",
            "title": "Paje",
            "type": "spot",
            "city": "Paje",
            "country": "tz",
            "latitude": "-6.265646",
            "longitude": "39.535332"
        }
    ]
}

Hope it will help...