Jquery with multi level json data array

Posted by coder on Stack Overflow See other posts from Stack Overflow or by coder
Published on 2013-10-22T15:50:31Z Indexed on 2013/10/22 15:53 UTC
Read the original article Hit count: 438

Filed under:
|
|
 var data = [{"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 tring to retrieve above json fommated 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');
                $("#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 ?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery