DataGrid in Dojo, with json data from servlet

Question

I am using JSON for the first time ... and I want to populate my datagrid with my JSON data, this is my JSON data:

{ "head": { "vars": [ "s" , "fname" , "lname" ] } , "results": { "bindings": [ { "s": { "type": "uri" , "value": "http://tn.gov.in/Person/41" } , "fname": { "type": "literal" , "value": " } , "lname": { "type": "literal" ,n" } } , { "s": { "type": "uri" , "value": "http://tn.gov.in/Person/37" } , "fname": { "type": "literal" , "value": "sh" } , "lname": { "type": "literal" , "value": "Vvan" } } , { "s": { "type": "uri" , "value": "http://tn.gov.in/Person/39" } , "fname": { "type": "literal" , "value": "Vavan " } , "lname": { "type": "literal" , "value": "Sran" } } ] } } 

I want to display fname and lname in a data grid, how do I do this? can anyone give an example of code that works on JSON? I tried a lot with examples, I get an empty grid

Answer 1

The key point here is that you need to convert the data first before using them in the dojo grid.

A live demo can be found here .

 dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileReadStore"); dojo.addOnLoad(function() { var data = { "head": { "vars": [ "s" , "fname" , "lname" ] } , "results": { "bindings": [ { "s": { "type": "uri" , "value": "http://tn.gov.in/Person/41" } , "fname": { "type": "literal" , "value": "Gayathri" } , "lname": { "type": "literal" , "value": "Vasudevan" } } , { "s": { "type": "uri" , "value": "http://tn.gov.in/Person/37" } , "fname": { "type": "literal" , "value": "Magesh" } , "lname": { "type": "literal" , "value": "Vasudevan" } } , { "s": { "type": "uri" , "value": "http://tn.gov.in/Person/39" } , "fname": { "type": "literal" , "value": "Vasudevan " } , "lname": { "type": "literal" , "value": "Srinivasan" } } ] } }; var items = dojo.map(data.results.bindings, function(binding) { return {fname : binding.fname.value, lname : binding.lname.value}; }); var store = new dojo.data.ItemFileReadStore({ data : { items : items } }); _createGrid(store); function _createGrid(store) { var layout = _getGridLayout(), node = dojo.create("div", {}, dojo.byId("grid"), "only"); var grid = new dojox.grid.DataGrid({ store : store, structure : layout, rowsPerPage: 10 }, node); grid.update(); grid.startup(); return grid; } function _getGridLayout() { return [[ { field : "fname", name : "First Name", width : "50%"}, { field : "lname", name : "Last Name", width : "50%" } ]]; } }); 

Answer 2

There is an error in the load call, it is an asynchronous call, and when you try to build a grid, you have no data, and the storage cannot be built as needed. You can enable all boot functions as shown below:

 var items,store; var ss = dojo.xhrGet({ url: "http://localhost:8477/E-Governance/listPerson", handleAs: "json", preventCache: true, load: function(data){ items = dojo.map(data.results.bindings, function(binding) { return { fname : binding.fname.value, lname : binding.lname.value }; }); store = new dojo.data.ItemFileReadStore({ data : { items : items } }); console.log(items[0].fname+' '+items[0].lname); _createGrid(sore); } }); console.log('3-4');