jQuery UI Widgets Forums Plugins Data Adapter More Nested Arrays

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • More Nested Arrays #73096

    Gary
    Participant

    I have a JSON structure in which each column is array of x,y pairs:

    var myData = [{varName:’CompanyName’, points:[{x:0,y:”McDonalds”}, {x:1,y:”Wendys”}, {x:2,y:”KFC”}]},
    {varName:’ContactName’, points:[{x:0,y:”Ronald”}, {x:1,y:”Wendy”}, {x:2,y:”Colonel”}]},
    {varName:’PrimaryItem’, points:[{x:0,y:”Burger”}, {x:1,y:”Burger”}, {x:2,y:”Chicken”}]}]

    Is there a way that this style data can be mapped with the data adapter for use in the grid?

    I’ve tried things like:
    {localData:’myData’,
    dataType:’array’,
    dataFields:[{name:’CompanyName’, type:’string’, map:’0>points>y’)},
    {name:’ContactName’, type:’string’, map:’1>points>y’)},
    {name:’PrimaryItem’, type:’string’, map:’2>points>y’)}]}

    I’ve also tried data type ‘json’, not specifying a name and many other things.

    More Nested Arrays #73120

    Dimitar
    Participant

    Hello Gary,

    Here is how to load this data in a grid:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var myData = [{
                    varName: 'CompanyName',
                    points: [{
                        x: 0,
                        y: "McDonalds"
                    }, {
                        x: 1,
                        y: "Wendys"
                    }, {
                        x: 2,
                        y: "KFC"
                    }]
                }, {
                    varName: 'ContactName',
                    points: [{
                        x: 0,
                        y: "Ronald"
                    }, {
                        x: 1,
                        y: "Wendy"
                    }, {
                        x: 2,
                        y: "Colonel"
                    }]
                }, {
                    varName: 'PrimaryItem',
                    points: [{
                        x: 0,
                        y: "Burger"
                    }, {
                        x: 1,
                        y: "Burger"
                    }, {
                        x: 2,
                        y: "Chicken"
                    }]
                }];
    
                var source = {
                    localData: myData,
                    dataType: 'array',
                    datafields: [{
                        name: 'CompanyName',
                        type: 'string'
                    }, {
                        name: 'ContactName',
                        type: 'string'
                    }, {
                        name: 'PrimaryItem',
                        type: 'string'
                    }]
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    beforeLoadComplete: function (data, originalData) {
                        var formattedData = [];
                        for (var i = 0; i < originalData.length; i++) {
                            var currentRecord = {};
                            currentRecord.CompanyName = originalData[0].points[i].y;
                            currentRecord.ContactName = originalData[1].points[i].y;
                            currentRecord.PrimaryItem = originalData[2].points[i].y;
                            formattedData.push(currentRecord);
                        }
                        return formattedData;
                    }
                });
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 680,
                    autoheight: true,
                    source: dataAdapter,
                    columnsresize: true,
                    columns: [
                      { text: 'CompanyName', datafield: 'CompanyName', width: 250 },
                      { text: 'ContactName', datafield: 'ContactName', width: 250 },
                      { text: 'PrimaryItem', datafield: 'PrimaryItem', width: 180 }
                  ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.