DataGrid in Dojo , with json data from a servlet.

Question

Hello , 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": "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" } } ] } }

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

hello , i have retrieved my data by my js is not porcessing after debug statement no 4.here is my code.

persons

@import "js/dijit/themes/tundra/tundra.css";

@import "js/dojo/resources/dojo.css";

@import "js/dojox/grid/resources/Grid.css";

@import "js/dojox/grid/resources/tundraGrid.css";





        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileReadStore");

        dojo.addOnLoad(function() {


  var ss = dojo.xhrGet({
                              url: "http://localhost:8477/E-Governance/listPerson", 
                              handleAs: "json", 
                              preventCache: true,
                              load: function(data){

                               var items = dojo.map(data.results.bindings, function(binding) {
                               return {fname : binding.fname.value, lname : binding.lname.value}; });             
                             console.log(items[0].fname+' '+items[0].lname);   
                              }
                            });

                       console.log('3');

           var store =  new dojo.data.ItemFileReadStore({           
               data : {
                  items : items
                }
            });

           console.log('4');                     
            _createGrid(sore);

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