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?

you'll probably need to flatten the object into what the plugin is expecting. Also, i see no json in your question. — user400654
– user400654, Commented Oct 22, 2013 at 15:57

Kippie · Accepted Answer · 2013-10-22 16:07:18Z

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.

answered Oct 22, 2013 at 16:07

Kippie

3,8304 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user400654 · Accepted Answer · 2013-10-22 16:07:55Z

0

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"

edited Oct 22, 2013 at 16:07

answered Oct 22, 2013 at 16:02

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Collectives™ on Stack Overflow

Jquery with multi level json data array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related