CODEWITHSUNDEEP
jqueryjsonajaxasp.net-mvcasp.net-mvc-4
Haseeb Mohamed
Haseeb Mohamed

Reputation: 1479

Loading a JSON data into a JQuery DataTable

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"
            }

Upvotes: 1

Views: 2929

Answers (3)

Haseeb Mohamed
Haseeb Mohamed

Reputation: 1479

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!

Upvotes: 0

roshini
roshini

Reputation: 112

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>

Upvotes: 0

Ankit Kathiriya
Ankit Kathiriya

Reputation: 1231

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>

Upvotes: 1

Related Questions