jQWidgets Forums

Tagged: JSON Data Adapter

This topic contains 4 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 9 months ago.

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

Author

Binding Data to JSON Posts

August 16, 2013 at 7:22 pm Binding Data to JSON #27011

mportugal

Member

Hi,

I am trying to read the data from a JSON which is formatted the following way:

{
“graphicalItems”: [
{
“columnIndex”: “0”,
“text”: “Sun 08/04”,
“toolTip”: “Sun 08/04”
},
{
“columnIndex”: “9”,
“text”: “0.00”,
“toolTip”: “”
},
{
“columnIndex”: “10”,
“text”: “0.00”,
“toolTip”: “”
}
]
}

How would I go about doing this?

August 16, 2013 at 7:28 pm Binding Data to JSON #27014

Peter Stoev

Keymaster

Hi mportugal,

Please, look at the code below:

<!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.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = {
                "grids": [
                {
                    "gridIndex": "0",
                    "gridStartDate": "08/04/2013",
                    "gridEndDate": "08/06/2013"
                },
                {
                    "gridIndex": "1",
                    "gridStartDate": "08/07/2013",
                    "gridEndDate": "08/09/2013"
                }
                ]
            };
            var source =
            {
                localdata: data,
                datatype: "json",
                datafields:
                [
                    { name: 'gridIndex', type: 'number' },
                    { name: 'gridStartDate', type: 'date' },
                    { name: 'gridEndDate', type: 'date' }
                ],
                root: "grids"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
        });
    </script>
</head>
<body class='default'>
</body>
</html>

As a result of the above code, your dataAdapter will have 2 records stored in its “records” Array.

var record1 = dataAdapter.records[0];
var record2 = dataAdapter.records[1];

Hope this helps you.

Best Regards,
Peter Stoev

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

August 16, 2013 at 7:53 pm Binding Data to JSON #27015

mportugal

Member

Thank you very much for the quick response. It worked!

August 16, 2013 at 8:07 pm Binding Data to JSON #27017

mportugal

Member

Now what happens if I want to take this a level further and have another json within that:

var data = {
                "grids": [
                {
                    "gridIndex": "0",
                    "gridStartDate": "08/04/2013",
                    "gridEndDate": "08/06/2013"
"rows": [
                {
                    "rowIndex": "0",
                    "groupKey": "08/04/2013"
},
{
                    "rowIndex": "1",
                    "groupKey": "08/05/2013"
}
]
                },
                {
                    "gridIndex": "1",
                    "gridStartDate": "08/07/2013",
                    "gridEndDate": "08/09/2013"
"rows": [
                {
                    "rowIndex": "0",
                    "groupKey": "08/07/2013"
},
{
                    "rowIndex": "1",
                    "groupKey": "08/08/2013"
}
]
                }
                ]
            };

August 17, 2013 at 1:49 pm Binding Data to JSON #27030

Peter Stoev

Keymaster

Hi mportugal,

Here’s the updated sample:

<!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.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = {
                "grids": [
                {
                    "gridIndex": "0",
                    "gridStartDate": "08/04/2013",
                    "gridEndDate": "08/06/2013",
                    "rows": [
                        {
                            "rowIndex": "0",
                            "groupKey": "08/04/2013"
                        },
                        {
                            "rowIndex": "1",
                            "groupKey": "08/05/2013"
                        }
                    ]
                },
                {
                    "gridIndex": "1",
                    "gridStartDate": "08/07/2013",
                    "gridEndDate": "08/09/2013",
                    "rows": [
                        {
                            "rowIndex": "0",
                            "groupKey": "08/07/2013"
                        },
                        {
                            "rowIndex": "1",
                            "groupKey": "08/08/2013"
                        }
                    ]
                }
                ]
            };
            var source =
            {
                localdata: data,
                datatype: "json",
                datafields:
                [
                    { name: 'gridIndex', type: 'number' },
                    { name: 'gridStartDate', type: 'date' },
                    { name: 'gridEndDate', type: 'date' },
                    { name: 'rows'},
                ],
                root: "grids"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
        });
    </script>
</head>
<body class='default'>
</body>
</html>

The records[0].rows will return the rows for the first record.

Best Regards,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.