PDA

View Full Version : Json Reader Problem



Kapfe89
26 Nov 2009, 1:43 AM
Hi,

i'll try to read data from a json-file, and render itinto a grid.


var store = new Ext.data.Store({
url: 'termine.json',
reader: new Ext.data.JsonReader({
root: 'rows',
id: 'id'},
[
'id',
'art',
'bez',
{name: 'datum', type: 'date', dateFormat: 'd.m.Y'},
{name: 'jahr', type: 'int'}
]

)
});
store.load();

//das Grid zur Anzeige
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'id', hidden: true, dataIndex:'id'},
{header:'Art', width: 150, dataIndex: 'art'},
{header: 'Bezeichnung', width: 150, dataIndex: 'bez'},
{header: 'Datum', width: 150, renderer: Ext.util.Format.dateRenderer('d.m.Y'), dataIndex: 'datum'},
{header: 'Alter', width: 50, dataIndex: 'jahr'}
],....The Json-file:

{
success: true,
rows: [
{
'id': '1',
'art': 'Geburtstag',
'bez': 'Somebody Geburtstag',
'datum': '08.11.1964',
'jahr': '1964'
},{
'id': '2',
'art': 'Geburtstag',
'bez': 'Lisa Geburtstag',
'datum': '03.06.1991',
'jahr': '1'
}
]
}But it doesn't work.
An empty grid is the only thing to look.

Thank you for your help.

Regards,
Martin

carol.ext
26 Nov 2009, 5:38 PM
Take a look at the Grid FAQ (http://www.extjs.com/learn/Ext_FAQ_Grid#Debugging).

Are you getting data back (check firebug)? Is the store loading? How are you displaying your grid, does it have a height?

Kapfe89
27 Nov 2009, 3:26 AM
Thanks for your answer.

The grid should be ok, i've tested it with local data and it works.

I tried this:


//add listener to store's load event before you execute store.load():
store.on({
'load':{
fn: function(store, records, options){
//store is loaded, now you can work with it's records, etc.
console.info('store load, arguments:', arguments);
console.info('Store count = ', store.getCount());
},
scope:this
},
'loadexception':{
//consult the API for the proxy used for the actual arguments
fn: function(obj, options, response, e){
console.info('store loadexception, arguments:', arguments);
console.info('error = ', e);
},
scope:this
}
});The ouput:


store loadexception, arguments: [Object api=Object url=termine.json events=Object, Object request=Object reader=Object scope=Object, Object tId=0 status=0 statusText=communication failure]

error = undefined

So it has to be a error with the store, but i don't now why.

And i don't understand how the debugging with firebug works.

Thanks for your help.

Regards Martin

Chief Vas
27 Nov 2009, 8:56 AM
I am only just beginning to understand all that Firebug does but it's been very helpful verifying that my php code on the server is responding to my AJAX requests as it should.

Add on Firebug to Firefox if you haven't already. Afterwards you'll have a little bug in the bottom right of the Firefox window. Click it to start Firebug then refresh the page with the grid you are having problems with. In the Console tab of Firebug you should get a line that expands when you click it showing the data returned from the server.

In the Script tab is all your script code. Clicking to the left of the line numbers sets a break point. When you refresh the page and your script runs it will pause on that line and you can go in and view the contents of all your variables to see if the data is there.

CrazyEnigma
27 Nov 2009, 9:49 AM
Your year (jahr) which is an int, has a string qualifier on it.

Kapfe89
30 Nov 2009, 1:37 AM
Hi,

i'll tried everything now, and changed the json file, but i can't load the store.

Kapfe89
5 Dec 2009, 6:54 AM
Hi,

i tried again to read json, but again, i doesn't work.
The code is now very short and simple.


Ext.onReady(function(){

var store = new Ext.data.ArrayStore({
url: 'file.json',
reader: new Ext.data.JsonReader({
root: 'rows',
id: 'id'},
['id', 'name'])
});
store.load();

alert(store.getAt(1).data.name);

});
{
success: true,
rows: [
{"id": "1", "name": "something"},
{"id": "2", "name": "something else"}
]
}But the result is, that firebug says:


store.getAt(1) is undefined
chrome://firebug/content/blank.gif alert(store.getAt(1).data.name);\r\nSo, the store is no loaded. But why?
The code is alright, isn't it?

Please help me.

Best regards,
Martin

Condor
5 Dec 2009, 7:03 AM
XHR requests are asynchronous. You have to wait until the store is loaded before you can examine the records, e.g.

store.on('load', function(){
alert(store.getAt(1).get('name'));
});

Kapfe89
5 Dec 2009, 7:33 AM
Hi,

thanks for your fast reply.

I modified the code like you suggested:


Ext.onReady(function(){

var store = new Ext.data.ArrayStore({
url: 'file.json',
reader: new Ext.data.JsonReader({
root: 'rows',
id: 'id'},
['id', 'name'])
});
store.load();

store.on('load', function(){
alert(store.getAt(1).get('name'));
});

});

The result: Nothing happens. No mistakes occur.

So, i think, the store is never loaded. What can be the result for this?

Best regards,
Martin

Kapfe89
5 Dec 2009, 10:37 AM
Hi,

thanks for your fast reply.
I modified the code as you suggested:


Ext.onReady(function(){

var store = new Ext.data.ArrayStore({
url: 'file.json',
reader: new Ext.data.JsonReader({
root: 'rows',
id: 'id'},
['id', 'name'])
});
store.load();

store.on('load', function(){
alert(store.getAt(1).get('name'));
});

});But the result is nothing... not even a mistake occurs.
The store is never been loaded. But why?
What's the reason for not loading the store?

Best regards,
Martin

Kapfe89
5 Dec 2009, 2:18 PM
Hi,

thanks for your fast reply.
I modified the code as you suggested:


Ext.onReady(function(){

var store = new Ext.data.ArrayStore({
url: 'file.json',
reader: new Ext.data.JsonReader({
root: 'rows',
id: 'id'},
['id', 'name'])
});
store.load();

store.on('load', function(){
alert(store.getAt(1).get('name'));
});

});But the result is nothing... not even a mistake occurs.
The store is never been loaded. But why?
What's the reason for not loading the store?

Best regards,
Martin

Kapfe89
6 Dec 2009, 1:10 AM
Hi,

thanks for your fast reply.
I modified the code as you suggested:


Ext.onReady(function(){

var store = new Ext.data.ArrayStore({
url: 'file.json',
reader: new Ext.data.JsonReader({
root: 'rows',
id: 'id'},
['id', 'name'])
});
store.load();

store.on('load', function(){
alert(store.getAt(1).get('name'));
});

});But the result is nothing... not even a mistake occurs.
The store is never been loaded. But why?
What's the reason for not loading the store?

Best regards,
Martin

Condor
6 Dec 2009, 11:21 PM
I assume that the server response isn't valid JSON or doesn't match the reader config.

Try adding an exception listener to the store and see if it is executed.

Kapfe89
7 Dec 2009, 10:13 AM
Hi,

thanks for your answer.
I added this:



store.on({
'load':{
fn: function(store, records, options){
//store is loaded, now you can work with it's records, etc.
console.info('store load, arguments:', arguments);
console.info('Store count = ', store.getCount());
},
scope:this
},
'loadexception':{
//consult the API for the proxy used for the actual arguments
fn: function(obj, options, response, e){
console.info('store loadexception, arguments:', arguments);
console.info('error = ', e);
},
scope:this
}
});
The result:



store loadexception, arguments: [Object api=Object url=termine.json events=Object, Object request=Object reader=Object scope=Object, Object tId=0 status=0 statusText=communication failure]
error = undefined

Something else: A configured firebug, that he shows xml mistakes.
And the result: not well-formed.
Shows it only, that json is not xml, or that the json isn't alright.
Because i checked it with jslint.com.

Best regards,
Martin

Condor
7 Dec 2009, 12:18 PM
You have a 'communication failure', so I don't think the data is actually received. Are you trying to load data from the local filesystem? Ext doesn't support that. You'll need to use the ext-basex user extension for that.

Also, an ArrayStore doesn't have a 'reader' config option. I think you want a plain Ext.data.Store.

Kapfe89
8 Dec 2009, 11:08 AM
Hi,

yes the json file is local.

I've just downloaded ext-basex, can you please explain me how to use it to solve my problem?

Thank you very much.

Best Regards,
Martin

CrazyEnigma
8 Dec 2009, 6:37 PM
Remote: Try Store instead of ArrayStore. Because you are using a reader and you are loading with JsonReader.

You should append the following, you are missing few properties.


url: 'your url',
fields: ['id', 'name']


If Local, use loadData instead of load:


var jsonData = [
{"id": "1", "name": "something"},
{"id": "2", "name": "something else"}
];
store.loadData(jsonData);


Be sure to use this in your store config:


mode: 'local',

Condor
8 Dec 2009, 11:44 PM
Hi,

yes the json file is local.

I've just downloaded ext-basex, can you please explain me how to use it to solve my problem?

Thank you very much.

Best Regards,
Martin

Include ext-basex.js after ext-all.js and add the following line before your Ext.onReady call:

Ext.lib.Ajax.forceActiveX = true;

phthanh
16 Jan 2010, 6:56 PM
Try



Ext.onReady(function(){

var store = new Ext.data.ArrayStore({
url: 'file.json',
reader: new Ext.data.JsonReader({
root: 'rows',
id: 'id'},
['id', 'name'])
});

store.on('load', function(){
alert(store.getCount());
});


store.load();
});