CODEWITHSUNDEEP
jsondatagriddojo
user291290
user291290

Reputation:

DataGrid in Dojo , with json data from a servlet

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

Upvotes: 4

Views: 13101

Answers (2)

sebbalex
sebbalex

Reputation: 397

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');

Upvotes: 0

Fu Cheng
Fu Cheng

Reputation: 3395

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%" }
      ]];
   }
});

Upvotes: 6

Related Questions