JsGrid loading nested object into table

Question

I am developing a web project in Django and using jsGrid. I encountered a problem and couldn't find a solution.

I have a nested JSON data which is created by combinating multiple DB table records. Here is my JSON :

{  
   "count":3,
   "results":[  
      {  
         "personnel":{  
            "name":"david",
            "age":34
         },
         "company":"IBM"
      },
      {  
         "personnel":{  
            "name":"john",
            "age":28
         },
         "company":"Google"
      },
      {  
         "personnel":{  
            "name":"Yuri",
            "age":42
         },
         "company":"Microsoft"
      }
   ]
}

Here is my js script:

function () {
    $("#personnelsgrid").jsGrid({
        height: "500px",
        width: "100%",
        filtering: !0,
        editing: !0,
        sorting: !0,
        paging: !0,
        autoload: !0,
        pageSize: 15,
        pageButtonCount: 5,
        deleteConfirm: "Do you really want to delete the client?",
        controller: {
            loadData: function (filter) {
                return $.ajax({
                    type: "GET",
                    url: "/get_personnels",
                    dataType: "json",
                    data: filter
                });
            }
        },
        fields: [
            {name: "personnel.name", type: "text", width: 50},
            {name: "personnel.age", type: "number", width: 50, filtering: false},
            {name: "company", type: "text", width: 200},
        ]

As it is seen, I have a nested objects in my data. Although the JSON comes from the server, it is not loaded in jsGrid table. What should I do?

Answer 1

As in your response json data is coming in format of response.results. So, in your loadData method you need to pass your results using $.Deferred() like this

loadData: function(filter) {
     var deferred = $.Deferred();
     $.ajax({
         type: "GET",
         url: "/get_personnels",
         dataType: "json",
         data: filter,
         success: function(response) {
             deferred.resolve(response.results);
         }
     });
     return deferred.promise();
 }

DEMO

$("#jsGrid").jsGrid({
    width: "100%",
    height: "auto",
    filtering: !0,
    editing: !0,
    sorting: !0,
    paging: !0,

    //for loadData method Need to set auto load true
    autoload: true,
    pageSize: 15,
    pageButtonCount: 5,
    deleteConfirm: "Do you really want to delete the client?",

    noDataContent: "Directory is empty",

    controller: {
        loadData: function(filter) {
            var deferred = $.Deferred();
            $.ajax({
                type: "get",
                url: "//api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jsgrid&site=stackoverflow",
                dataType: "json",
                success: function(response) {
                    deferred.resolve(response.items);
                }
            });
            return deferred.promise();
        }
    },

    fields: [{
        name: "owner.display_name",
        title: 'Name',
        type: "text",
        width: 50
    }, {
        name: "title",
        title: 'Title',
        type: "text",
        width: 200
    }]
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="jsGrid"></div>