DataGrid in Dojo , with json data from a servlet

Question

I am using JSON for first time... and want to fill 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 the data grid how should I so it? can any one give a sample code which works for above JSON? I tried a lot with examples , i am getting a blank grid

Answer 1

The key point here is that you need to transform your data first before using it in dojo grid.

A live demo can be found at 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 a mistake in load call, it is an async call then when you try to build the grid you don't have the data and the store cannot be built as needed. You can include everything in load function 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');