Loading a JSON data into a JQuery DataTable

Question

I am trying to load a JSON data into a Jquery DataTable in MVC 4.The following is the ActionResult in the Controller.

public ActionResult TimeZone()
    {
        BitlyDataStore json = new BitlyDataStore();
        var result = json.GetTimeZoneWiseScoreCard();
        return Json(result, JsonRequestBehavior.AllowGet);
    }

The corresponding output is a JSON data.The data is:

{"Scores":[{"Subject":"America/Los_Angeles","Count":421},
{"Subject":"","Count":636},{"Subject":"America/Phoenix","Count":40},
{"Subject":"America/Chicago","Count":686},
{"Subject":"America/Indianapolis","Count":50},
{"Subject":"Australia/NSW","Count":32},
{"Subject":"America/New_York","Count":903},
{"Subject":"America/Denver","Count":89},
{"Subject":"America/Port_of_Spain","Count":1},{"Subject":null,"Count":120}]}

How do we load this into a JQueryTable in its corresponding view?I have read through the documentation but couldn't understand how to pass it.I have tried passing through the Ajax code in documentation.The code is:

$('#example').dataTable({
            "ajax": {

                "url": "/Bitly/TimeZone/",
                "dataType": "json"
            }

I think your json data is not in proper format. Your Scores property is showing to have an array but I can't see a closing bracket for same! — Vinit Sharma
– Vinit Sharma, Commented Dec 16, 2015 at 4:25
@HaseebMohamed i think your json is object and datatable takes list or array see my answer. — Ankit Kathiriya
– Ankit Kathiriya, Commented Dec 16, 2015 at 4:56
i have checked your json data it is valid can you provide punker/your code here? and here your not mentioned method in ajax .like....."type": "GET"/"POST" — roshini
– roshini, Commented Dec 16, 2015 at 5:00

Ankit Kathiriya · Accepted Answer · 2015-12-16 04:54:13Z

1

I think your response is wrong the datatable takes list of data and your response is object there for you need to make list of yor data see bellow example.

var datasource={"Scores":[{"Subject":"America/Los_Angeles","Count":421},{"Subject":"","Count":636},{"Subject":"America/Phoenix","Count":40},{"Subject":"America/Chicago","Count":686},{"Subject":"America/Indianapolis","Count":50},{"Subject":"Australia/NSW","Count":32},{"Subject":"America/New_York","Count":903},{"Subject":"America/Denver","Count":89},{"Subject":"America/Port_of_Spain","Count":1},{"Subject":null,"Count":120}]};

var dataitems=[];
$.each(datasource.Scores,function(i,item){
  var data=[];
  data.push(item.Subject);
  data.push(item.Count);
  dataitems.push(data);
});

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataitems,
        columns: [
            { title: "Subject" },
            { title: "Count" }            
        ]
    });
});

<link href="http://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<table id="example"></table>

answered Dec 16, 2015 at 4:54

Ankit Kathiriya

1,23110 silver badges17 bronze badges

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

1 Comment

Haseeb Mohamed Over a year ago

Is there any way to pass the data other than specifying it explicitly in the code?I saw a code in the documentation by just specifying it in the ajax property. $(document).ready(function() { $('#example').DataTable( { "ajax": '../ajax/data/arrays.txt' } ); } );

roshini · Accepted Answer · 2015-12-16 05:38:33Z

i tried like this it's working for me, whatever response your getting that object better should be data only not Scores like below ...(i dont have your code that is the reason i tried like this...

object.txt

{
"data":[
    {"Subject":"America/Los_Angeles","Count":421},
    {"Subject":"","Count":636},
    {"Subject":"America/Phoenix","Count":40},
    {"Subject":"America/Chicago","Count":686},
    {"Subject":"America/Indianapolis","Count":50},
    {"Subject":"Australia/NSW","Count":32},
    {"Subject":"America/New_York","Count":903},
    {"Subject":"America/Denver","Count":89},
    {"Subject":"America/Port_of_Spain","Count":1},           
    {"Subject":null,"Count":120}
   ]
}

html is....

<!DOCTYPE html>

<html>
<head>
    <title>Routing with Route Provider First Application</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Subject</th>
                <th>Count</th>                    
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Subject</th>
                <th>Count</th>                     
            </tr>
        </tfoot>
    </table>
    <script>
        $(document).ready(function () {
            $('#example').DataTable({
//               "ajax": "obj.txt",
                "ajax": {
                    "url": "obj.txt",
                    "dataType": "json",
                    //"type": "GET"
                },
                "columns": [
                    {"data": "Subject"},
                    {"data": "Count"}
                ]
            });
        });
    </script>
  </body>
</html>

check this link also datatables.net/examples/ajax/objects.html for your case else follow datatables.net/examples/index for data tables...

Haseeb Mohamed · Accepted Answer · 2015-12-16 11:12:43Z

0

I tried many ways and the above mentioned methods.But these were not the answers that i wanted.My mentor found a solution and i am sharing it below.

$(document).ready(function () {
        $('#example').dataTable({
            "ajax": {
                "url": "/Bitly/TimeZone",
                "dataSrc": "Scores",

            },

            "columns": [
               { "data": "Subject" },
               { "data": "Count" }
            ]
        });
    });

Where dataSrcand data are keywords of the datatable.Thanks for the help everyone!

answered Dec 16, 2015 at 11:12

Haseeb Mohamed

1,4791 gold badge11 silver badges15 bronze badges

Collectives™ on Stack Overflow

Loading a JSON data into a JQuery DataTable

3 Answers 3

1 Comment

object.txt

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

object.txt

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related