ExtJS - Json Reader reading non array data?

[wongadob]

I am learning the extjs framework and I have come across an issue.

 

I have a simple JSON object I read from the server that is NOT an array of data, it is just a series of key-value pairs. This is displayed using a data view and XTemplate. The JSON looks like this:-

{  "likes": 0,  "shares": 0,  "comments": 4,  "friends": 0,  "tags": 0,}

This is read by taking the user ID making a AJAX call using jsonReader to retrieve just these 5 bits of information. I just cannot get it to function correctly and I believe the reason is that JSONReader is expecting an array, not an object of key value pairs. What should I be using instead? I have spent the whole afternoon trying to figure this out, so now my cry for help. I need to have the data available for an xtemplate. The code I am using to read it is as follows.

user_details = new Ext.data.Store({	reader: new Ext.data.JsonReader({		fields: ['likes','shares','comments','friends','tags']	}),	proxy: new Ext.data.HttpProxy({		url: 'json/details.json'	}),	autoLoad: true});

I just have a dummy xtemplate at the moment I have hacked it right down to a single <h1>blah blah </h1> line, but it is never being executed. I assume because data is not being validated correctly. I have checked this by using a different store and xtemplate and they render fine in the same panel.

 

As I mentioned above what SHOULD I be doing to make this data available for an xtemplate.

 

Thanks in anticipation

 

PS - I don't have any control over how the backend send the data so I need to find a solution from the FE

Edited July 1, 2013 by wongadob

[justsomeguy]

Which version are you using? All of the readers use arrays, they are all designed to work with multiple records. Templates are also, since they use the store (the store, by definition, is for multiple records). The easiest way is to change the JSON format so that it's an array with one object. If you can't do that then I would send an ajax request to get the JSON data, convert it to an object, build the array yourself and add the object, and then create a store with the local array of data. A JsonReader will still work with a local array, just don't use an HttpProxy. Pass the array directly to the store in the data property.

[wongadob]

It will be 3.4 for this project. Trying to keep it as modular as possible, As I said I have not got much control over the JSON as its used on multiple products and platforms.

[justsomeguy]

You'll sacrifice some of the automation that ExtJS provides if you can't change the JSON. Maybe you can create a wrapper that ExtJS can use which would get the JSON and wrap it in a response that ExtJS can consume automatically. Otherwise, you'll just have to get the JSON and then set it up in an array in Javascript before giving it to the store.