Put JSON Data on JQuery DataTables

Question

I want to ask how to put JSON Data on JQuery DataTables? I cannot load my JSON data when I want to load it. I am using CodeIgniter. Here is my code on my view

<table id="kategoriTable" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Kode Kategori</th>
                <th>Nama</th>
                <th>Definisi</th>
                <th>Unsur Abstrak</th>
                <th>Alias</th>
                <th>Sumber Definisi</th>
                <th>Tanggal</th>
                <th>Tipe Tanggal</th>
                <th>Edisi</th>
                <th>Role</th>
                <th>Other Citation Detail</th>
                <th>Katalog</th>
                <th>Organisasi</th>
            </tr>
        </thead>
    </table>

I have tried this javascript:

<script type="text/javascript">
        $('#kategoriTable').dataTable({
    ajax: {
    url : "http://localhost:90/kugi_deployment/api/json/reply/KategoriRetrieve",
    dataSrc : function(json) {
       console.log(json);
       return json.Kategoris
    }
   },
   //data : testData.Kategoris,
   columns: [
  { data: "KodeKategori"},
  { data: "Nama"},
  { data: "Definisi"},
  { data: "UnsurAbstrak"},
  { data: "Alias"},
  { data: "SumberDefinisi"},
  { data: "Tanggal"},
  { data: "TipeTanggal"},
  { data: "Edisi"},
  { data: "Role"},
  { data: "OtherCitationDetail"},
  { data: "NamaKatalog"},
  { data: "NamaOrganisasi"}
 ]
  });
    </script>

This is my JSON Data Structure

{"State":0,"Message":"","Kategoris":[{"KodeKategori":"A","Nama":"REFERENSI SPASIAL","Definisi":"","UnsurAbstrak":true,"Alias":"","SumberDefinisi":"","Tanggal":"\/Date(-62135596800000-0000)\/","TipeTanggal":"","Edisi":"","Role":"","OtherCitationDetail":"","NamaKatalog":"Katalog Unsur Geografis","NamaOrganisasi":"Badan Informasi Geospasial"}, ....and so on, ]}

Last, this is the controller:

public function index()
{
    $get_url_service = $this->url_service->GetUrl('KategoriRetrieve');
    $get_json = file_get_contents($get_url_service);
    $data['get_data'] = new RecursiveIteratorIterator(new RecursiveArrayIterator(json_decode($get_json, TRUE)), RecursiveIteratorIterator::SELF_FIRST);
    $this->load->view('test', $data);
}

It shows error, cannot parse the data. Here is the screenshot I take:

When I try to load from that url it returns 'Loading' forever. Am I do something wrong with it? I really confuse to fix this. Hope anyone can help me to fix this. Thanks

The JSON data is probably serialized as a string, you have to parse it in to a JSON object. Try var obj = JSON.parse(text); — John Svensson
– John Svensson, Commented Oct 21, 2015 at 14:31
how do you return the json? your json is invalid too.. run it into a validator — Ilanus
– Ilanus, Commented Oct 21, 2015 at 14:32
Well, there is nothing with the JSON nor the initialisation itself -> jsfiddle.net/0ng51ek1 so it must be something else ...Do you ever get a response at all? Have updated my answer below to 1) console out a response if any, and 2) return the Kategoris array directly. Hope it helps! — davidkonrad
– davidkonrad, Commented Oct 22, 2015 at 7:38
@davidkonrad I see. I got error when trying to get the url of the JSON Data. My url to get the data is: http://localhost:90/kugi_deployment/api/json/reply/KategoriRetrieve When I tried to get the data, response from JSON is error. I have updated my question above, showing the error — arnold_p
– arnold_p, Commented Oct 22, 2015 at 8:22
It seems to me that you never get a response at all - why not try just to echo the $get_json out, as below? That part seems to work fine, guess that it is the result of file_get_contents($get_url_service) you have as demo JSON above? — davidkonrad
– davidkonrad, Commented Oct 22, 2015 at 9:24

davidkonrad · Accepted Answer · 2015-10-22 09:22:17Z

2

public function index()
{
    $get_url_service = $this->url_service->GetUrl('KategoriRetrieve');
    $get_json = file_get_contents($get_url_service);
    echo $get_json;
    //what are the below lines good for??
    //$data['get_data'] = new RecursiveIteratorIterator(new RecursiveArrayIterator(json_decode($get_json, TRUE)), RecursiveIteratorIterator::SELF_FIRST);
    //$this->load->view('test', $data);
}

You have it a little bit backwards. You must instruct dataTables to use items from the Kategoris array, this is done through ajax.dataSrc. And columns should specify which data-property in each item from the array that corresponds to which column :

$('#kategoriTable').dataTable({
   ajax: {
        url : "<?php echo base_url().'json/reply/KategoriRetrieve' ?>",
        dataSrc : function(json) {
           console.log(json);
           return json.Kategoris
        }
   },
   columns: [
      { data: "KodeKategori"},
      { data: "Nama"},
      { data: "Definisi"},
      { data: "UnsurAbstrak"},
      { data: "Alias"},
      { data: "SumberDefinisi"},
      { data: "Tanggal"},
      { data: "TipeTanggal"},
      { data: "Edisi"},
      { data: "Role"},
      { data: "OtherCitationDetail"},
      { data: "NamaKatalog"},
      { data: "NamaOrganisasi"}
   ]
});

edited Oct 22, 2015 at 9:22

answered Oct 21, 2015 at 14:32

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

1 Comment

arnold_p Over a year ago

I still got error when trying to load the data. It is loading forever. I have edited my code above @davidkonrad

Collectives™ on Stack Overflow

Put JSON Data on JQuery DataTables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related