Binding Embedded JSON Arrays

[SimonParticipant]

First of all, thank you very much for the extensive examples for jQWidgets. They have helped me greatly so far, but I am stuck when attempting to bind embedded JSON arrays. In this particular case, the array gets dynamically populated on the server; I cannot know in advance what to expect in terms of columns (the example in the jsFiddle is simplified). So what I have is a few static properties such as employee name and then a list of columns that I need to bind. When I run the fiddle, only headers are rendered. I verified on jsonlint.com that the JSON I have is valid. The problem appears to be with the embedded array. If I remove it from the data, “John Doe” is rendered in the grid.

var data =
{
    "Employee": "John Doe",
    "JobCode":
    [
        { "Id": 1, "Code": "A" },
        { "Id": 2, "Code": "B" }
    ]
};

var source = {
    datatype: 'json',
    mapChar: '>',
    localdata: data,
    datafields:
    [
        { name: 'Employee', map: 'Employee' },
        { name: 'JobCodeA', map: 'JobCode>0>Code' },
        { name: 'JobCodeB', map: 'JobCode>1>Code' }
    ]
};

var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid({
    source: dataAdapter,
    columns:
    [
        { text: 'Employee Name', datafield: 'Employee', width: 200 },
        { text: 'Job Code A', datafield: 'JobCodeA', width: 200 },
        { text: 'Job Code B', datafield: 'JobCodeB', width: 200 }
    ]
});

Thank you very much for any help you can provide.

[SimonParticipant]

Here’s the link to the fiddle:

http://jsfiddle.net/2gzQc/3/

[Peter StoevKeymaster]

Hi SimonUA,

Actually, the data is not very accurate. Missing are the [ and ] i.e it should be:

` var data =
[
{
“Employee”: “John Doe”,
“JobCode”:
[
{ “Id”: 1, “Code”: “A” },
{ “Id”: 2, “Code”: “B” }
]
}
]`

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[SimonParticipant]

Hi Peter,

Thank you very much for your quick reply. I appreciate that. What you suggested did the trick. Thank you. I updated the fiddle to a working version now:

http://jsfiddle.net/2gzQc/4/

Simon

[Author]

Posts