Jquery with multi level json data array

Question

[
  {
    "Address": {
      "Address": "4 Selby Road\nHowden",
      "AddressId": "1414449",
      "AddressLine1": "4 Selby Road",
      "AddressLine2": "Howden",
      "ContactId": "14248844",
      "County": "North Humberside",
      "Country": "UK",
      "Postcode": "DN14 7JW",
      "Town": "GOOLE",
      "FullAddress": "4 Selby Road\nHowden\r\nGOOLE\r\nNorth Humberside\r\nDN14 7JW\r\nUnited Kingdom"
    },
    "ContactId": 14248844,
    "Title": "Mrs",
    "FirstName": "",
    "Surname": "Neild",
    "FullName": " Neild",
    "PostCode": "DN14 7JW"
  },
  {
    "Address": {
      "Address": "466 Manchester Road\nBlackrod",
      "AddressId": "1669615",
      "AddressLine1": "466 Manchester Road",
      "AddressLine2": "Blackrod",
      "ContactId": "16721687",
      "County": "",
      "Country": "UK",
      "Postcode": "BL6 5SU",
      "Town": "BOLTON",
      "FullAddress": "466 Manchester Road\nBlackrod\r\nBOLTON\r\nBL6 5SU\r\nUnited Kingdom"
    },
    "ContactId": 16721687,
    "Title": "Miss",
    "FirstName": "Andrea",
    "Surname": "Neild",
    "FullName": "Andrea Neild",
    "PostCode": "BL6 5SU"
  },
  {
    "Address": {
      "Address": "5 Prospect Vale\nHeald Green",
      "AddressId": "2127294",
      "AddressLine1": "5 Prospect Vale",
      "AddressLine2": "Heald Green",
      "ContactId": "21178752",
      "County": "Cheshire",
      "Country": "UK",
      "Postcode": "SK8 3RJ",
      "Town": "CHEADLE",
      "FullAddress": "5 Prospect Vale\nHeald Green\r\nCHEADLE\r\nCheshire\r\nSK8 3RJ\r\nUnited Kingdom"
    },
    "ContactId": 21178752,
    "Title": "Mrs",
    "FirstName": "",
    "Surname": "Neild",
    "FullName": " Neild",
    "PostCode": "SK8 3RJ"
  }
]

I'm trying to retrieve above JSON (called data) in jQuery as below:

 var source =
    {
        localdata: data,
        sort: customsortfunc,
        datafields:
        [
            { name: 'Surname', type: 'string' },
            { name: 'FirstName', type: 'string' },
            { name: 'Title', type: 'string' },
            { name: 'Address.Address', type: 'string' }

        ],
        datatype: "array"
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#jqxgrid").jqxGrid(
        {
            width: 670,
            source: dataAdapter,
            theme: theme,
            sortable: true,
            pageable: true,
            autoheight: true,
            ready: function () {
                $("#jqxgrid").jqxGrid('sortby', 'FirstName', 'asc');
            },
            columns: [
                { text: 'Title', datafield: 'Title', width: 100 },
                { text: 'First Name', datafield: 'FirstName', width: 100 },
                { text: 'Last Name', datafield: 'Surname', width: 100 },
                { text: 'Address', datafield: 'Address.Address', width: 100 },

            ]
        });

The only issue is there is no display for "Address.Adress". Can anyone advise me?

Answer 1

Flatten your array of objects before you pass it to the grid.

localdata: $.map(data,function(obj){
    return $.extend(obj,{ 
        Address: obj.Address.Address
    });
}),

Now you can simply use "Address" rather than "Address.Address"

Answer 2

I'm not at all familiar with the plugins you are using here, but looking at the info on this page, I believe it's an issue in using the wrong mapChar.

You'd either need to use Address>Address, or specify a different mapChar in your options and set it to '.'.

Hope this helps.