How to bind json nested object in Jquery Jtable?

Question

Table can display idNo, dateOfBirth and gender, but name and address cannot display.

After transformation of java customer list, it will be :

{
  ...
  "idNo": "MyNRC",
  ...
  "address": {
    "homeNo": "No-27",
    "street": "12th street",
    "city": "MyCity",
    "province": "MyProvince"
  },
  "name": {
    "firstName": "Jone",
    "middleName": "",
    "lastName": "Hon"
  }
}

What I am missing in my fields binding script?

CustomerManage.java <- servlet

....
List<Customer> customerList = customerService.findAllCustomer();
Gson gson = new Gson();
JsonElement element = gson.toJsonTree(customerList, new TypeToken<List<Customer>>(){}.getType());
JsonArray jsonArray = element.getAsJsonArray();
String listData = jsonArray.toString();
listData = "{\"Result\":\"OK\",\"Records\":" + listData + "}";
response.setContentType("application/json");
response.getWriter().print(listData);

Customer.java

public class Customer {
    private String idNo;
    private Date dateOfBirth;
    private Gender gender;
    private Address address;
    private Name name;
}   

Address.java

public class Address {
    private String homeNo;
    private String street;
    private String city;
    private String province;
}   

Name.java

public class Name {
    private String firstName;
    private String middleName;
    private String lastName;
}

<script type="text/javascript">
    $(document).ready(function () {
        $('#CustomerTableContainer').jtable({
            title: 'Manage Customer',
            actions: {
                listAction: 'CustomerManage?action=list',
                createAction:'CustomerManage?action=create',
                updateAction: 'CustomerManage?action=update',
                deleteAction: 'CustomerManage?action=delete'
            },
            fields: {
                idNo: {
                    title: 'NRC-No',
                    key: true,
                    width: '20%',
                    edit: false
                },
                dateOfBirth: {
                    title: 'Date Of Birth',
                    key: true
                },
                gender: {
                    title: 'Gender',
                    key: true
                },
                address: {
                    title: 'Address',
                    homeNo: {
                        title: 'Home-No',
                        key: true
                    },
                    street: {
                        title: 'Street',
                        key: true
                    },
                    city: {
                        title: 'City',
                        key: true
                    },
                    province: {
                        title: 'Province',
                        key: true
                    }
                },
                name: {
                    firstName: {
                        title: 'First Name',
                        key: true
                    },
                    middleName: {
                        title: 'Middle Name',
                        key: true
                    },
                    lastName: {
                        title: 'Last Name',
                        key: true
                    }
                }
            }
        });
        $('#CustomerTableContainer').jtable('load');
    });
</script>

Answer 1

hope it is not too late. Use the keyword 'record' to help you access nested fields from the retrieved json data. See below for an example.

.....

gender: {
         title: 'Gender',
         key: true
},

homeNo: {
        title: 'Home-No',
        key: true,
        display:function(data){
                   return data.record.address.homeNo;
        }
},
street: {
        title: 'Street',
        key: true,
        display:function(data){
                   return data.record.address.street;
           }
},
city: {
      title: 'City',
      key: true,
      display:function(data){
                return data.record.address.city;
      }
},
province: {
           title: 'Province',
           key: true,
           display:function(data){
                     return data.record.address.province;
           }
},
firstName: {
        title: 'First Name',
        display:function(data){
                   return data.record.name.firstName;
        }
},
middleName: {
        title: 'Middle Name',
        display:function(data){
                  return data.record.name.middleName;
        }
},
lastName: {
        title: 'Last Name',
        display:function(data){
                  return data.record.name.lastName;
        }
},

........

inspiration from this link: https://github.com/hikalkan/jtable/issues/509