从Alloy UI数据表创建JSON

Question

I have created a datatable from JSON using alloyUI and I am pushing a new row each time the "Add Row" button is clicked. After all this is complete I need to create a json of this final collection of data on "Submit" click. But I am unable to find a way to convert a datatable/HTML table (either one will do) to JSON using alloyUI

This is my html and js:

 YUI().use('aui-datatable','json-stringify', function(A) { var data = [ {Name: 'Bob', Age: '28',Salary: '10000',Department: 'Admin',Address: 'Kolkata'}, {Name: 'Joe', Age: '42',Salary: '20000',Department: 'Accounts',Address: 'Kolkata'}, {Name: 'Sarah', Age: '35',Salary: '30000',Department: 'Sales',Address: 'Kolkata'}, {Name: 'Billy', Age: '24',Salary: '40000',Department: 'Admin',Address: 'Kolkata'}, {Name: 'James', Age: '36',Salary: '50000',Department: 'Accounts',Address: 'Kolkata'}, {Name: 'Stark', Age: '51',Salary: '60000',Department: 'Sales',Address: 'Kolkata'} ]; var dtable = new A.DataTable.Base({ columnset: ['Name', 'Age','Salary','Department','Address'], recordset: data }) .render("#container"); A.one('#addRow').on('click', function() { data.push({ "Name": A.one('#Name').get('value'), "Age": A.one('#Age').get('value'), "Salary": A.one('#Salary').get('value'), "Department": A.one('#Department').get('value'), "Address": A.one('#Address').get('value') }); dtable.set('recordset', data); A.one('#Name').set('value', ''); A.one('#Age').set('value', ''); A.one('#Salary').set('value', ''); A.one('#Department').set('value', ''); A.one('#Address').set('value', ''); }); A.one('#submit').on('click', function() { //Here I need the code to create JSON }); }); 

 <script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script> <link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link> <div class="example"> <div> <input id="Name" style="width:90px" placeholder="Name"></input> <input id="Age" style="width:30px" placeholder="Age"></input> <input id="Salary" style="width:60px" placeholder="Salary"></input> <input id="Department" style="width:90px" placeholder="Department"></input> <input id="Address" style="width:100px" placeholder="Address"></input> </div> <br> <div id="container"></div> <br> <button id="addRow">Add row</button> <button id="submit">Submit</button> </div> 

Answer 1

You need to use JSON.stringify() . Pass it the data that you want to send to JSON. For your example, you should pass dtable.get('recordset') :

A.JSON.stringify(dtable.get('recordset'))

Here's a runnable example using your code:

 YUI().use('aui-datatable','json-stringify', function(A) { var data = [ {Name: 'Bob', Age: '28',Salary: '10000',Department: 'Admin',Address: 'Kolkata'}, {Name: 'Joe', Age: '42',Salary: '20000',Department: 'Accounts',Address: 'Kolkata'}, {Name: 'Sarah', Age: '35',Salary: '30000',Department: 'Sales',Address: 'Kolkata'}, {Name: 'Billy', Age: '24',Salary: '40000',Department: 'Admin',Address: 'Kolkata'}, {Name: 'James', Age: '36',Salary: '50000',Department: 'Accounts',Address: 'Kolkata'}, {Name: 'Stark', Age: '51',Salary: '60000',Department: 'Sales',Address: 'Kolkata'} ]; var dtable = new A.DataTable.Base({ columnset: ['Name', 'Age','Salary','Department','Address'], recordset: data }) .render("#container"); A.one('#addRow').on('click', function() { data.push({ "Name": A.one('#Name').get('value'), "Age": A.one('#Age').get('value'), "Salary": A.one('#Salary').get('value'), "Department": A.one('#Department').get('value'), "Address": A.one('#Address').get('value') }); dtable.set('recordset', data); A.one('#Name').set('value', ''); A.one('#Age').set('value', ''); A.one('#Salary').set('value', ''); A.one('#Department').set('value', ''); A.one('#Address').set('value', ''); }); A.one('#submit').on('click', function() { A.one('#json').set('innerHTML', A.JSON.stringify(dtable.get('recordset'))); }); }); 

 <script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script> <link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link> <div class="example"> <div> <input id="Name" style="width:90px" placeholder="Name"></input> <input id="Age" style="width:30px" placeholder="Age"></input> <input id="Salary" style="width:60px" placeholder="Salary"></input> <input id="Department" style="width:90px" placeholder="Department"></input> <input id="Address" style="width:100px" placeholder="Address"></input> </div> <br> <div id="container"></div> <br> <button id="addRow">Add row</button> <button id="submit">Submit</button> </div> <div id="json"></div>