Information does not display in the data tables

In my JSON data, the structure is as follows:

  $(document).ready(function(){
                var dataku = [];
                $.ajax({
                    url: base_url+'laporan/load_trx_per_tgl_bukopin',
                    dataType: 'json', 
                    success: function(data){
                        dataku = jQuery.parseJSON(JSON.stringify(data));;
                        console.log(dataku);                            
                }
                });

                $('#tabelTransaksiPerTglBukopin').DataTable( {
                    'dom': 'Zlfrtip',
                    'scrollX': true,
                    'data': dataku
                });
            });

However, I am facing an issue where the data is not being displayed correctly in my datatables. Here is how it looks on my view :

jsondatatables

Answer №1

give it a go 

$(document).ready(function(){
  var infoData = [];
  $.ajax({
    url: base_url+'laporan/load_trx_per_tgl_bukopin',
    dataType: 'json', 
    success: function(data){
      infoData = jQuery.parseJSON(JSON.stringify(data));;
      console.log(infoData);
      $('#tabelTransaksiPerTglBukopin').DataTable( {
        'dom': 'Zlfrtip',
        'scrollX': true,
        'data': infoData
      });  
      }
    });      
 });

When using ajax, remember that it stands for asynchronous JavaScript and XML, meaning the data retrieval may take some time. Placing your DataTable setup inside the success callback ensures that the infoData is ready for use.

I hope this explanation helps!

Answer №2

One alternative method involves utilizing AJAX directly as the data source for Datatables:

$('#tabelTransaksiPerTglBukopin').DataTable({
  ajax: {
    url: base_url + 'laporan/load_trx_per_tgl_bukopin',
    dataSrc: ''
  },
  'dom': 'Zlfrtip',
  'scrollX': true,
  'columns': [{
      "data": "Lembar_BPJS_Kesehatan"
    },
    {
      "data": "Total_BPJS_Kesehatan"
    },
    {
      "data": "Lembar_PDAM_TIRTA_BULIAN_TB_TINGGI_SUMUT"
    },
    {
      "data": "Total_PDAM_TIRTA_BULIAN_TB_TINGGI_SUMUT"
    },
    {
      "data": "Lembar_PDAM_TIRTA_UMBU_KAB__NIAS"
    },
    {
      "data": "Lembar_PDAM_TIRTAULI_KOTA_PEMATANGSIANTAR"
    },
    {
      "data": "Total_PDAM_TIRTAULI_KOTA_PEMATANGSIANTAR"
    },
    {
      "data": "Lembar_PLN_Postpaid"
    },
    {
      "data": "Total_PLN_Postpaid"
    },
    {
      "data": "Lembar_Pulsa_Listrik"
    },
    {
      "data": "Total_Pulsa_Listrik"
    },
    {
      "data": "Lembar_Telkom"
    },
    {
      "data": "Total_Telkom"
    },
    {
      "data": "tgl_dari"
    },
    {
      "data": "tgl_sampai"
    }
  ]
});

Assuming that your AJAX JSON response follows this structure:

[{
    "Lembar_BPJS_Kesehatan": "2",
    "Total_BPJS_Kesehatan": "56000",
    "Lembar_PDAM_TIRTA_BULIAN_TB_TINGGI_SUMUT": "5",
    "Total_PDAM_TIRTA_BULIAN_TB_TINGGI_SUMUT": "398300",
    "Lembar_PDAM_TIRTA_UMBU_KAB__NIAS": "1",
    "Total_PDAM_TIRTA_UMBU_KAB__NIAS": "23089",
    "Lembar_PDAM_TIRTAULI_KOTA_PEMATANGSIANTAR": "319",
    "Total_PDAM_TIRTAULI_KOTA_PEMATANGSIANTAR": "20434870",
    "Lembar_PLN_Postpaid": "103",
    "Total_PLN_Postpaid": "10272775",
    "Lembar_Pulsa_Listrik": "30",
    "Total_Pulsa_Listrik": "1905000",
    "Lembar_Telkom": "4",
    "Total_Telkom": "1716000",
    "tgl_dari": "2018-04-20",
    "tgl_sampai": "2018-04-20"
}]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a surprise token < while processing JSON with ASP.NET MVC alongside Angular

I encountered an issue when attempting to return the Index page. The data is successfully sent from the client to the server, but upon trying to display the Index page, an error occurs. Could someone review my code and identify where the mistake lies? acc ...

c#jsonasp.net-mvcangulartypescript

Integrating with Visual Studio, this exceptional Addin brings forth a remarkable capability of visually representing a handpicked

I have a vast collection of xml files, and within some elements, there exist json serialized objects. These objects are quite challenging to comprehend and modify. Therefore, my inquiry is as follows: Does Visual Studio offer any add-ins that can enhance ...

visual-studiojsonvisual-studio-addins

Receive dual responses in a single express post

I have a question regarding making multiple requests in one post in Express and receiving multiple responses on the client side (specifically Angular). When I try to make two res.send(body) calls, I encounter an error stating: Error: Can't set headers ...

angularjsjsonnode.jsexpressresponse

The @JsonIgnore annotation is failing to function as expected

It seems like the @JsonIgnore annotation is not functioning as expected in my project. I have come across some suggestions stating that this issue may arise due to the use of incompatible Jackson versions (org.codehaus vs. com.fasterxml). However, I am onl ...

javajsonmavenjacksonjersey

The WCF response has been deemed invalid because of the presence of an unexpected string combination involving WCF and JSON

I recently set up a WCF service to interact with JSON data, but I'm encountering an issue where all entries are being escaped. [ { "rel":"http:\/\/localhost:3354\/customer\/1\/order", &qu ...

c#.netwcfjson

Performing a task through an AJAX call in DNN MVC

During my DNN MVC development journey, I encountered another issue. I am unsure if this is a bug, a missing feature, or a mistake on my part. Let me elaborate on the problem below. My Objective I aim to trigger an action in my controller by making an AJA ...

jqueryjsonasp.net-mvcdotnetnuke

WebApi Failing to Properly Deserialize Data

I'm at my wit's end here. I think I just need another set of eyes. Method Signature: public async Task<IHttpActionResult> Post(ApiRequest request) Model: [SuppressMessage("ReSharper", "CollectionNeverUpdated.Global")] [SuppressMessage(" ...

c#jsonserializationasp.net-web-api

Incorporate another parameter into the current JSON data

I am currently facing the following scenario: Several servlets are setting the HttpServletResponse content-type to application/json. This is how I am outputting my JSON: out.write(new Gson().toJson(myObject)); where myObject is an object that structur ...

jsonservletsargumentsgson

How to use Newtonsoft to deserialize a JSON string into a collection of objects in C#

Here is a sample code for a class: using System; public class AppEventsClass { public string title { get; set; } public string description { get; set; } } Imagine retrieving the following JSON string after calling a remote webservice: {"d":"[{ ...

c#jsonweb-servicesserializationdeserialization

PHP does not detect the Ajax object that has been sent to it

Here's the data I am trying to send: In this blockquote: switch=rssAdd&data=[object Object],[object Object]... etc. This data is generated by the following code snippet: The Javascript function shown above parses XML elements and formats them ...

phpjqueryjsonobject

Difference between an optional field and a null value in kotlinx.serialization

Is there a way to differentiate between handling {data: null} and {} when parsing JSON using kotlinx.serialization? @Serializable class MyClass(val data: String?) ...

jsonkotlinkotlinx.serialization

Incorporate geographical data from a JSON file into my Google Maps application

Hey there, I'm a newbie on this forum and could really use your expertise. I've put together an html5 page with Google maps using the API key from Google (My code is shown below), it's working fine with a central marker in place and loads pe ...

javascriptjsonhtml

Extracting Json data with Jquery

My JSON data format is as follows - I've been struggling to find a way to retrieve the photo reference value. Can anyone help me with this? { "debug_info" : [], "html_attributions" : [ "Listings by \u003ca href=\"http://www.yellowpages. ...

jqueryjsongoogle-places-api

What is the best way to retrieve and utilize JSON data from an AJAX request in a Django view?

I have been attempting to send dynamically generated JSON data from my template using an ajax call to the view. I am successful in creating and passing the JSON data through the ajax call, but unfortunately, I am encountering difficulties reading the same ...

jsonajaxdjangodjango-views

Retrieve the data exclusively when transferring information from Laravel to JSON

I am facing a challenge in my Laravel project where both the key and value are being passed to the variable I assigned when attempting to pass data in JSON format. I have tried using $data = json_encode($ip); inside the controller, but only one result is r ...

phpjsonlaravel

Troubleshooting Issues with Retrieving Android Data from MySQL Database using PHP and JSON

Even though I have encountered this question multiple times on stack overflow, I have tried all the solutions provided and none of them seem to work for me. I am attempting to display data in a List View. The data is stored in JSON format and it appears t ...

phpandroidmysqlarraysjson

Retrieve an array of wide characters leading to a memory leak

I need help creating a JSON string from my input arrays. I used "new" to allocate memory for the JSON, but I'm unsure about how or where to deallocate this memory. Is there a more efficient way to write this function? wchar_t* SetExpectedTabsDat ...

c++jsonmemory-leaksfree

Node.js accepts JSON data sent via XMLHttpRequest

I have successfully implemented a post method using xmlhttprequest: var xhttp = new XMLHttpRequest() xhttp.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { console.log('Request finished. Pro ...

javascriptjsonnode.js

What is the process for altering a variable within an Ajax function?

Scenario: I'm dealing with JSON data fetched from the backend which needs to be presented in a table format. To achieve this, I've created a string called tableOutputString and am populating it by iterating through the JSON response. Finally, I&a ...

javascriptjsonajax

Updating website content dynamically using Javascript and JSON-encoded data

My programming code seems to be acting oddly. I have structured my data in a JSON object as follows: injectJson = { "title": "Champion Challenge Questions", "rules": [ { "idChrono": "chrono-minute", "text": "Top is missing!", ...

javascripthtmljsonvariablesundefined