CODEWITHSUNDEEP
sencha-touchjsonpsencha-touch-2
Amar
Amar

Reputation: 51

how to retrieve value from json data in sencha touch 2

my model is:

Ext.define('GS.model.user', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'string'
    }, {
        name: 'username',
        type: 'string'
    }, {
        name: 'email',
        type: 'string'
    }]
});

my store code is:

Ext.define('GS.store.userstore', {
    extend: 'Ext.data.Store',
    requires: 'GS.model.user',
    config: {
        model: 'GS.model.user',
        autoLoad: true,
        // data: [],
        proxy: {
            type: 'ajax',
            url: '/app/mydata.json',
            reader: {
                type: 'json',
                root: 'users'
            }
        }
    },
    listeners: {
        load: function(store) {
            alert(store.getCount());
            console.log(store.getAt[0]);
        }
    }
});

view code:

Ext.define('GS.view.userlist', {
    extend: 'Ext.form.Panel',
    xtype: 'userpanel',
    requires: ['GS.store.userstore', 'Ext.form.Panel'],

    config: {
        itemTpl: '{store.get("id"),{sotre.get("username")},{store.get("email")}',
        store: 'userstore'
    }
});

Json data:

[{
    "users": [{
        "id": "1001",
        "username": "user1",
        "email": "[email protected]"
    }, {
        "id": "1002",
        "username": "user2",
        "email": "[email protected]"
    }, {
        "id": "1003",
        "username": "user3",
        "email": "[email protected]"
    }, {
        "id": "1004",
        "username": "user4",
        "email": "[email protected]"
    }]
}]

after running it at google chore i'm getting error:

OPTIONS file:///D:/app/mydata.json?_dc=1334569840508&page=1&start=0&limit=25

Resource failed to load.

please tell me how it's possible? how can i retrieve json data value and populate it as a list. help me.

Upvotes: 0

Views: 3692

Answers (5)

Praveen Nunna
Praveen Nunna

Reputation: 1

Host the json file in some location, that should be accessible over http.i.e place the file in any of the server running on your local machine ang give the URL in the url section of Proxy of store.

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

use localhost in url to run you app

for example:

http://localhost/your_app

Upvotes: 2

rdougan
rdougan

Reputation: 7225

There are two issues with your code:

  1. Your JSON is valid, but it cannot be read by the JSON reader because it is an array. If you remove the [ and ] it will work:

    {
    "users": [
        {
            "id": "1001",
            "username": "user1",
            "email": "[email protected]"
        },
       ...
    ]
}

  2. Inside your reader, you need to use rootProperty - not root:

    reader: {
    type: 'json',
    rootProperty: 'users'
}

  3. Within your itemTpl you can access fields directly using {fieldName} - you do not need to use store.get('xxx'):

    itemTpl: '{username}, {email}'

As for the file not loading; I'm not sure. Try a different browser and if it still doesn't work, check again that the file actually exists.

Upvotes: 1

Martin
Martin

Reputation: 1914

Is the path wrong? To me it can't even locate the file.

proxy: {
        type: 'ajax',
        url : 'app/mydata.json', // CHANGE THIS TO 'app/mydata.json'
        reader: {
            type: 'json',
            root: 'users'
           }} },

I put your json into jsonlint.org and it passed, so I don't think that is the issue. Based on the error, I don't think your path is correct. If what I posted above didn't work, I'd copy the mydata.json into the root folder, where the index.html is located and just have the proxy url configured as url: 'mydata.json',

Upvotes: 1

borck
borck

Reputation: 926

Your json data doesn't seem right.

"users" shouldn't be between quotes and the same holds for all your "id" and "username" and "email" statements :

Json data:

{
   users:
      [
         { id: "1001", username: "user1" , email:"[email protected]"},
         { id: "1002", username: "user2" , email:"[email protected]"},
         { id: "1003", username: "user3" , email:"[email protected]"},
         { id: "1004", username: "user4" , email:"[email protected]"}
      ]
}

Upvotes: 1

Related Questions