如何在Jquery Jtable中绑定json嵌套对象？

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