{"id":1012,"date":"2013-05-08T08:33:22","date_gmt":"2013-05-08T08:33:22","guid":{"rendered":"http:\/\/garysieling.com\/blog\/?p=1012"},"modified":"2013-05-08T08:33:22","modified_gmt":"2013-05-08T08:33:22","slug":"extjs-json-reader-example","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/extjs-json-reader-example\/","title":{"rendered":"ExtJs JSON Reader Example"},"content":{"rendered":"
I received the following email from a reader:<\/div>\n
<\/div>\n
<\/div>\n
Thank you very much for finding time to read my mail.<\/em><\/div>\n
<\/div>\n
I came across your blog\u00a0http:\/\/garysieling.com\/blog\/extjs-pie-chart-example<\/a><\/em><\/div>\n
<\/div>\n
<\/div>\n
It would be greatly helpful, if you could provide me with the code of binding the data dynamically to the DS. I have already generated the data in JSON format via Servlet:<\/em><\/p>\n
<\/div>\n
<\/div>\n

{“success”:true,”campaignList”:[{“NumberOfCampaigns”:1,”CamapaignScheduleDate”:”Mar 23, 2013 12:00:00 AM”}]}<\/em><\/p>\n

<\/div>\n
<\/div>\n

How do I attach this here..<\/em><\/p>\n

<\/div>\n
<\/div>\n

var store = Ext.create(‘Ext.data.Store’, {<\/em>
\n\u00a0 \u00a0 model: ‘PopulationPoint’,<\/em>
\n\u00a0 \u00a0 data:\u00a0MY_DATA<\/span><\/em>
\n\u00a0 });<\/em><\/p>\n

<\/div>\n
<\/div>\n
Any help would be of great use.<\/em><\/div>\n<\/div>\n
\u00a0<\/span><\/em><\/div>\n
\n
Thanks and regards<\/em><\/div>\n
<\/div>\n
Response:<\/strong><\/div>\n
<\/div>\n
There are a couple ways to approach this problem. The linked example that I wrote uses a raw Javascript object to render a pie chart. Lets say your servlet returns JSON in a variable – you could parse this yourself and use the result in the store, but Ext provides the JSONReader for this purpose:<\/div>\n
<\/div>\n
var store = new Ext.data.JsonStore({\n    url: '\/servlet',\n    root: 'campaignList',\n    fields: [{name:'NumberOfCampaigns', type: 'int'}, \n             {name:'CampaignScheduleDate', type:'date'}]\n});<\/pre>\n
<\/div>\n
<\/div>\n
A couple things to note here- this assumes you know the types in advance, and in particular, you want to test dates carefully to make sure you render them in a format Ext can parse. \u00a0If needed, you can specify a date format as well, like so:\u00a0dateFormat: ‘m-d-Y g:i A’<\/div>\n
<\/div>\n
You can add a “mapping” to the fields, to alias columns from the servlet.\u00a0The root value is optional – if a servlet returns a raw array this is not necessary.\u00a0You may need to add “totalProperty” to the store as well – this specifies the name of a property in the JSON payload which specifies the total number of records. This is only needed for paging scenarios, where not all the results are returned at once.<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
I received the following email from a reader: Thank you very much for finding time to read my mail. I came across your blog\u00a0http:\/\/garysieling.com\/blog\/extjs-pie-chart-example It would be greatly helpful, if you could provide me with the code of binding the data dynamically to the DS. I have already generated the data in JSON format via … <\/p>\n
Continue reading “ExtJs JSON Reader Example”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[213,214,218,224],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/1012"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=1012"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/1012\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=1012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=1012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=1012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}