Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
40
Binding to JSON data
posted

Hi,

I'm trying to bind to JSON data coming from an Ajax web service.  The data comes down in the format listed below.  But to give a brief explanation, my data is as follows:

int TimeCardId

string fullName

obj EmployeeObj

where EmployeeObj is of the type:

string name

int id

etc.

I need to understand how to reference the EmployeeObj columns when the data is returned from the server.  I'm trying to bind to an igDataSource using an igDataSchema, but the binding fails for columns in the nested object.  The top-level columns bind just fine.  When I declare the igDataSchema, I need to list all fields, give a name, datatype, and xpath.  This is where I'm stuck.  Can you show me how to point to a nested column?

Json data below.

Thanks,

Pete Egler

IDesign, Inc.

[{"__type":"TimeSheetObj:#QTE.Client","employee":{"active":true,"changePasswordOnLogin":false,"companyId":2,"email":"mikeludlum@stoutsystems.com","firstName":"Great","fullName":"Great Gazoo","groupId":0,"groupName":"None                          ","id":1,"laborDistFavs":[],"lastName":"Gazoo","maxTimeCardDate":"/Date(1376366400000-0400)/","minTimeCardDate":"/Date(1373169600000-0400)/","name":"Great Gazoo","reportsToId":null,"roleId":3,"roleName":"Admin","subordinates":null,"supervisedGroups":null,"timeEntryMode":0,"timeEntryModeName":"Hourly","userName":"admin"},"endDate":"/Date(1376366400000-0400)/","entryModeId":0,"fullName":"Great Gazoo","holidays":[],"nonworked":null,"startDate":"/Date(1375243200000-0400)/","submittedDate":null,"timeCardId":88,"worked":null},{"__type":"TimeSheetObj:#QTE.Client","employee":{"active":true,"changePasswordOnLogin":false,"companyId":2,"email":"mikeludlum@stoutsystems.com","firstName":"Mister","fullName":"Mister Slate","groupId":0,"groupName":"None                          ","id":2,"laborDistFavs":[{"laborDistId":108},{"laborDistId":137}],"lastName":"Slate","maxTimeCardDate":"/Date(1376366400000-0400)/","minTimeCardDate":"/Date(1356238800000-0500)/","name":"Mister Slate","reportsToId":null,"roleId":2,"roleName":"Supervisor","subordinates":[{"active":true,"changePasswordOnLogin":false,"companyId":2,"email":"mikeludlum@stoutsystems.com","firstName":"Fred","fullName":"Fred Flinstone","groupId":2,"groupName":"Slade Slackers                ","id":3,"laborDistFavs":[{"laborDistId":104},{"laborDistId":106},{"laborDistId":148}],"lastName":"Flinstone","maxTimeCardDate":"/Date(1376366400000-0400)/","minTimeCardDate":"/Date(1356238800000-0500)/","name":"Fred Flinstone","reportsToId":2,"roleId":1,"roleName":"User","subordinates":null,"supervisedGroups":null,"timeEntryMode":0,"timeEntryModeName":"Hourly","userName":"fred"},{"active":true,"changePasswordOnLogin":false,"companyId":2,"email":"mikeludlum@stoutsystems.com","firstName":"Wilma","fullName":"Wilma Flinstone","groupId":2,"groupName":"Slade Slackers                ","id":4,"laborDistFavs":[{"laborDistId":137},{"laborDistId":151}],"lastName":"Flinstone","maxTimeCardDate":"/Date(1376419891560)/","minTimeCardDate":"/Date(1356238800000-0500)/","name":"Wilma Flinstone","reportsToId":2,"roleId":1,"roleName":"User","subordinates":null,"supervisedGroups":null,"timeEntryMode":0,"timeEntryModeName":"Percentage","userName":"wilma"},{"active":true,"changePasswordOnLogin":false,"companyId":2,"email":"mikeludlum@stoutsystems.com","firstName":"Barney","fullName":"Barney Rubble","groupId":1,"groupName":"Rubble Removers               ","id":5,"laborDistFavs":[],"lastName":"Rubble","maxTimeCardDate":"/Date(1376419891567)/","minTimeCardDate":"/Date(1375296691567)/","name":"Barney Rubble","reportsToId":2,"roleId":1,"roleName":"User","subordinates":null,"supervisedGroups":null,"timeEntryMode":0,"timeEntryModeName":null,"userName":"emp3"},{"active":true,"changePasswordOnLogin":false,"companyId":2,"email":"mikeludlum@stoutsystems.com","firstName":"Betty","fullName":"Betty Rubble","groupId":1,"groupName":"Rubble Removers               ","id":6,"laborDistFavs":[],"lastName":"Rubble","maxTimeCardDate":"/Date(1376419891575)/","minTimeCardDate":"/Date(1375296691575)/","name":"Betty Rubble","reportsToId":2,"roleId":1,"roleName":"User","subordinates":null,"supervisedGroups":null,"timeEntryMode":0,"timeEntryModeName":null,"userName":"emp4"}],"supervisedGroups":[{"description":"None                                                                                                                                                                                                                                                           ","id":0,"name":"None                          ","supervisorId":2},{"description":"Rubble Removers                                                                                                                                                                                                                                                ","id":1,"name":"Rubble Removers               ","supervisorId":2},{"description":"Slade Slackers                                                                                                                                                                                                                                                 ","id":2,"name":"Slade Slackers                ","supervisorId":2}],"timeEntryMode":0,"timeEntryModeName":"Hourly","userName":"mister"},"endDate":"/Date(1376366400000-0400)/","entryModeId":0,"fullName":"Mister Slate","holidays":[],"nonworked":null,"startDate":"/Date(1375243200000-0400)/","submittedDate":null,"timeCardId":89,"worked":null}]

  • 3595
    Suggested Answer
    posted

    Hello Pete,

    Thank you for posting in our community!

    Composite JSON objects might be attached to the grid by using a formatter function as shown in the example bellow:

         $("#grid1").igGrid({         

                              columns: [             

                                    { headerText: "Product ID", key: "ProductID", dataType: "number" },             

                                    { headerText: "Product Name", key: "Name", dataType: "string" },             

                                    { headerText: "Distributor",  key: "Distributor", dataType: "string" },             

                                    { headerText: "Quantity", key: "Results", dataType: "object", formatter: function(val)

                                                                          {                                

                                                                               return val.Quantity;                               

                                                                           }             

                                     },             

                                    { headerText: "Price", key: "Results", dataType: "object", formatter: function(val)

                                                                       {                                

                                                                           return val.Price;                               

                                                                        }            

                                    }         

                               ],

    The whole working sample is attached for you reference.

    Please let me know if this helps. If you have further questions don’t hesitate to contact me.

    igGridNestedObjects.zip