jQuery UI Widgets › Forums › Plugins › Data Adapter › More Nested Arrays
Tagged: angular grid, beforeLoadComplete, data, data adapter, grid, jquery grid, jqxDataAdapter, jqxgrid, json, map, mapping, nested arrays
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 7 months ago.
-
AuthorMore Nested Arrays Posts
-
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.
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.