jQuery UI Widgets › Forums › Plugins › Data Adapter › access dataAdapter records
Tagged: async, autoBind, bind, data adapter, dataBind, datafield mapping, jqxDataAdapter, loadComplete, map, mapping
This topic contains 7 replies, has 2 voices, and was last updated by Dimitar 8 years, 6 months ago.
-
Author
-
Hi guys,
Why I always get empty records of jqx DataAdapter
var adapter = new $.jqx.dataAdapter(source); var recordi = adapter.records; console.log(recordi);
and in my source I have defined that it is synchronous binding.
datatype: 'json', url: 'data.json', async: false,
How can I access records of JSON jqxDataAdapter. What am I doing wrong.
Thank youHi atomic,
If you are using the data adapter stand-alone (with no respective widget), then you should bind it to the data source. You can do this two ways:
var adapter = new $.jqx.dataAdapter(source, { autoBind: true }); var recordi = adapter.records; console.log(recordi);
or
var adapter = new $.jqx.dataAdapter(source); adapter.dataBind(); var recordi = adapter.records; console.log(recordi);
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
thank you for your prompt answer. I am not using it stand-alone, now I gor two get responses but still records are empty.
I will post shorter version of code with sample data.<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>This example shows how to display nested Grid plugins.</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.3.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 source = { datafields: [ { name: 'year', type: 'int' }, { name: 'ED', type: 'int' }, { name: 'LF', type: 'decimal' }, { name: 'PMAX', type: 'decimal' } ], datatype: 'json', url: 'data.json', async: false, }; var adapter = new $.jqx.dataAdapter(source); adapter.dataBind(); var recordi = adapter.records; console.log(recordi); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> </body> </html>
and Data sample data.json
[ { "year": "2000", "ED": "51", "LF": "1.21839", "PMAX": "8", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "2.500000", "CF": "2.500000" }, { "tech": "Wind", "InstalledPower": "39.000000", "CF": "39.000000" }, { "tech": "Hydro", "InstalledPower": "35.000000", "CF": "39.000000" } ] } }, { "year": "2010", "ED": "92", "LF": "2.60137", "PMAX": "2", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "32.000000", "CF": "45.000000" }, { "tech": "Wind", "InstalledPower": "14.000000", "CF": "30.000000" } ] } }, { "year": "2020", "ED": "62", "LF": "2.60137", "PMAX": "2", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "32.000000", "CF": "45.000000" }, { "tech": "Wind", "InstalledPower": "14.000000", "CF": "30.000000" } ] } } ];
Thank you.
best regardsHi atomic,
If you populate a grid through the data adapter, you do not need to bind it manually.
You can also access the loaded records in the dataAdapter’s loadComplete callback function. Please take a look at the following modification of the demo Binding to JSON, which shows how to do so:
<!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 url = "../sampledata/beverages.txt"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: url, async: false }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { alert('Loaded ' + records.length + ' records.'); } }); $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, columnsresize: true, columns: [ { text: 'Name', datafield: 'name', width: 250 }, { text: 'Beverage Type', datafield: 'type', width: 250 }, { text: 'Calories', datafield: 'calories', width: 180 }, { text: 'Total Fat', datafield: 'totalfat', width: 120 }, { text: 'Protein', datafield: 'protein', minwidth: 120 } ] }); }); </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,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
This works fine but I am still not able to get what I want.
Is there a way to use dataAdapter’s records as stand-alone.
I just want to see records, simple example below.<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>This example shows how to display nested Grid plugins.</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.3.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 source = { datafields: [ { name: 'year', type: 'int' }, { name: 'ED', type: 'int' }, { name: 'LF', type: 'decimal' }, { name: 'PMAX', type: 'decimal' } ], datatype: 'json', url: 'data.json', async: false, }; var adapter = new $.jqx.dataAdapter(source); adapter.dataBind(); var recordi = adapter.records; console.log(recordi); }); </script> </head> <body class='default'> </body> </html>
data.json file is
[ { "year": "2000", "ED": "51", "LF": "1.21839", "PMAX": "8", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "2.500000", "CF": "2.500000" }, { "tech": "Wind", "InstalledPower": "39.000000", "CF": "39.000000" }, { "tech": "Hydro", "InstalledPower": "35.000000", "CF": "39.000000" } ] } }, { "year": "2010", "ED": "92", "LF": "2.60137", "PMAX": "2", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "32.000000", "CF": "45.000000" }, { "tech": "Wind", "InstalledPower": "14.000000", "CF": "30.000000" } ] } }, { "year": "2020", "ED": "62", "LF": "2.60137", "PMAX": "2", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "32.000000", "CF": "45.000000" }, { "tech": "Wind", "InstalledPower": "14.000000", "CF": "30.000000" } ] } } ];
sorry to bother you, but it seems like something very simple an if I use loacaldata with same code everything works great.
thank youHello atomic,
Please note that a stand-alone file with JSON must not contain a semicolon (;) at the end. This may be what causes the issue. Other than that, your code should work as expected.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
That is true, and that was the problem Thank you for that.
I have another question. I would like to create another dataAdapter with same json data as posted above, but I would like to get children data of technologies. I was able to populate dataAdapter but only for the first element od data.json filevar source2 = { root: "0>technologies>technology", datatype: 'json', url: 'data.json', async: false, datafields: [ { name: 'tech', map: 'tech', type: 'decimal' }, { name: 'InstalledPower', map: 'InstalledPower', type: 'decimal' }, { name: 'CF', map: 'CF', type: 'decimal' }, ], };
How can I get elements (tec, InstalledPower, CF) for all tree elements of json (all three years)
Thank you againHi atomic,
To achieve this, you would have to map your datafields. More information and some examples with mapping can be found in the jqxDataAdapter documentation entry.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.