Convert Json into jquery-datatable in ajax?

Question

Now the json data has been stored in a variable "msg" in ajax. I can only alert(msg) in the page. But I want to put it into datatable or whatever proper way to see the data with columns in ajax or js.

Here is the json type:

{ "aaData": [ { "ID": "1", "FESTIVAL": "Antipodes Festival", "SUBURB": "Lonsdale Street, Melbourne", "POSTCODE": "3000", "WEBSITE": "http://www.antipodesfestival.com.au/", "DESCRIPTION": "The greek precinct in melbourne cbd will transform into a huge, free street festival with the hosting of the antipodes lonsdale street festival which will hold sway from 14 february 2015 to 15 february 2015." }, { "ID": "5", "FESTIVAL": "Boite Singers Festival", "SUBURB": "Victoria", "POSTCODE": "3000", "WEBSITE": "http://boite.com.au/index.php", "DESCRIPTION": "The boite singers festival brings you four days of vocal inspiration and sheer fun on the second weekend of january each year." } ] }

Sathish · Accepted Answer · 2015-09-05 09:07:15Z

0

I am not clear about your question but I think you want to display your JSON values as a table!

$(document).ready(function(){
var myjson = { "aaData": [ { "ID": "1", "FESTIVAL": "Antipodes Festival", "SUBURB": "Lonsdale Street, Melbourne", "POSTCODE": "3000", "WEBSITE": "http://www.antipodesfestival.com.au/", "DESCRIPTION": "The greek precinct in melbourne cbd will transform into a huge, free street festival with the hosting of the antipodes lonsdale street festival which will hold sway from 14 february 2015 to 15 february 2015." }, { "ID": "5", "FESTIVAL": "Boite Singers Festival", "SUBURB": "Victoria", "POSTCODE": "3000", "WEBSITE": "http://boite.com.au/index.php", "DESCRIPTION": "The boite singers festival brings you four days of vocal inspiration and sheer fun on the second weekend of january each year." } ] } ;
 console.log(myjson);
 for(i=0;i < myjson.aaData.length;i++){
  var html='';
  $.each(myjson.aaData[i], function(ind,val){
      html +='<td>'+val+'</td>';
  });
  $('#table_id tbody').append('<tr>'+html+'</tr>');
 }
   $('#table_id').DataTable();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<table id="table_id" class="display">
    <thead>
        <tr>
          <th>ID</th>
          <th>FESTIVAL</th> 
          <th>SUBURB</th>
          <th>POSTCODE</th>
          <th>WEBSITE</th>
          <th>DESCRIPTION</th>
        </tr>
    </thead>
    <tbody>        
    </tbody>
</table>

I hope this will help you :)

edited Sep 5, 2015 at 9:07

answered Sep 5, 2015 at 8:55

Sathish

2,4601 gold badge16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Guodong Rong Over a year ago

It gives an error: 0x800a138f - JavaScript runtime error: Unable to get property 'length' of undefined or null reference. Happens in the myjson.aaData.length. Btw, I have added the reference in the page, I do not know why.

Guodong Rong Over a year ago

I tried your code, it works. The only problem is my data is stored in a variable "msg", And it will change whenever I got data from sql server (But the format is the same). I could not var myjson={...}; I used msg.aaData.length, it will give the erro above. Could you please tell me how to fix it?

Community · Accepted Answer · 2017-05-23 12:22:01Z

0

this is done like this

//html
<table id="example" class="display" width="100%">
</table>

//jquery
$('#example').DataTable( {
    "aaData": data,
    "aoColumns": [
        { "mDataProp": "name" },
        { "mDataProp": "position" },
        { "mDataProp": "office" },
        { "mDataProp": "extn" },
        { "mDataProp": "start_date" },
        { "mDataProp": "salary" }
    ]
} );
//data source

var data= [
{
  "name": "Tiger Nixon",
  "position": "System Architect",
  "salary": "$320,800",
  "start_date": "2011/04/25",
  "office": "Edinburgh",
  "extn": "5421"
},
{
  "name": "Garrett Winters",
  "position": "Accountant",
  "salary": "$170,750",
  "start_date": "2011/07/25",
  "office": "Tokyo",
  "extn": "8422"
}
]

you should refer to this stackoverflow question. and this fiddle

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Sep 5, 2015 at 9:13

harshitpthk

4,1362 gold badges26 silver badges32 bronze badges

1 Comment

Guodong Rong Over a year ago

Sorry, my json data is achieved from sql server, I use a variable "msg" to get the content, It could change. But thank you for your answer.

Gnanamoorthy Chithembaram · Accepted Answer · 2019-02-21 10:48:45Z

This code working to me try this one

 function AgGetDataCtrl() {
             debugger
            var AgServiceData = EmployeeService.AgGetDataSvc();
            AgServiceData.then(function (response) {
                //$scope.totalDisplayed = 20; 
                $scope.Datas = response.data;
                var d = response.data;
                debugger
               
                $(document).ready(function () {
                    var data = [];
                   // var data = [];//.data;

                    for (var i = 0 ; i < d.length; i++) {
                        data.push([  null,
                                    d[i].ECode, d[i].EName, d[i].EmploymentStatus, d[i].Company, d[i].Location,
                                    d[i].Department, d[i].Category, d[i].Designation, d[i].TBand, d[i].Roster,d[i].Shift,
                                    d[i].ForReports, d[i].DOJ, d[i].DOB, d[i].Gender, d[i].Address, d[i].City, d[i].Phone, d[i].Bloodgroup,
                                    d[i].Supervisor1
                            ]);
                    } 
                  var table=  $('#example').DataTable({ 
                        data: data,
                        "columnDefs": [ {
                            "targets": -21,
                            "data": null,
                            "defaultContent": ' <button type="button" class="btn bg-info  btn-xs mr-sm" title="View">  <em class="fa fa-edit fa-fw"></em> </button>'
                        } ],
                        deferRender: false,
                        "scrollY": 200,
                        "scrollX": true,
                        scrollCollapse: false,
                        scroller: false
                    });
                    $('#example tbody').on('click', 'button', function () {
                        var data = table.row($(this).parents('tr')).data();
                        debugger;
                        //alert(data[0] + "'s salary is: " + data[5]);
                        $scope.AgGetDataByIdCtrl(data[1]);
                    });
                    });
               // }
            }, function () {
                $scope.Alertmsg = "Error 1101";
            });
        }

How is this code related to OP's issue? I can't see aaData here

Collectives™ on Stack Overflow

Convert Json into jquery-datatable in ajax?

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related