jQuery UI Widgets Forums Plugins Data Adapter Binding Data to JSON

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • 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?

    • This topic was modified 6 years, 11 months ago by  mportugal.
    • This topic was modified 6 years, 11 months ago by  mportugal.
    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/

    Binding Data to JSON #27015

    mportugal
    Member

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

    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"
    }
    ]
    }
    ]
    };
    • This reply was modified 6 years, 11 months ago by  mportugal.
    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/

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

You must be logged in to reply to this topic.