Not displaying JSON data in Jquery datatable.

skazi

Hi,
I am trying to display sample data from my Java controller into the table, however, it is not rendering the data nor displaying any error messages. For the time being, I am trying to display simple mock data in JSON format...

I am using JSP, AngualrJS and jquery for front end, Java for backend..

This is my JSP Page table:

 <table class="table table-striped table-bordered dt-responsive nowrap" id="myTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Status</th>
                </tr>
            </thead>
</table

This is my JSP page:

$.ajax({
        url:"/home/review/",
        success:function(data)  { 
        var table = $('#myTable').DataTable( {
            "data": data,
            dom: "Bfrtip",
            "iDisplayLength": 15,
            "lengthChange": false,
            "ordering": true,
            "info":     false,
            'columnDefs': [
             {
                'targets': 1,
                'orderable': false,
                'checkboxes': {
                   'selectRow': true
                }
             }
              ],
              'select': {
                 'style': 'multi'
              },
      
            "columns": [
                { "data": null, render: function ( data, type, row ) {
                    // Combine the first and last names into a single table field
                    return '';
                } },
                { "data": "id", "defaultContent": "" },
                { "data": "status", "defaultContent": ""}
            ],
});
}
});

This is my angularJS Controller:

angular.module('myApp').controller('HomeController', ['DTOptionsBuilder', 'DTColumnBuilder','HomeService', '$scope', function(DTOptionsBuilder, DTColumnBuilder, HomeService, $scope) {
    var test_URL =  '/home/review/';
    var self = $scope;
        
    var vm = this;
            
    vm.dtOptions = HomeService.fetchList();
    console.log(vm.dtOptions);

}]);

My angularJS service:

angular.module('myApp').factory(HomeService', ['$http', '$q', function($http, $q){

    var URL= '/home/review/';
    
    var factory = {
            fetchList: fetchList
    };

    return factory;
    
    function fetchList() {
        var deferred = $q.defer();
        $http.get(URL)
            .then(
            function (response) {
                deferred.resolve(response.data);
            },
            function(errResponse){
                console.error('Error while fetching List');
                deferred.reject(errResponse);
            }
        );
        return deferred.promise;
    }
}]);

This is my Java backend controller:

 @RequestMapping(value = "/review/", method = RequestMethod.GET)
    public String geList() throws JSONException {
        logger.info("List All Controller");
        System.out.println("Fetching All list...");

        JSONArray resultarray = new JSONArray();
        String resultString = "";
                JSONObject result = new JSONObject();
                result.put("id","1234");
                result.put("status", "New");
                resultarray.put(result);
    
            resultString = resultarray.toString(4);
            System.out.println(resultString);

        return resultString;
    }

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

skazi

Can someone please help me with this. I have been stuck for long with no luck

kthorngren

First problem is you defined two columns in your table:

<thead>
<tr>
<th>ID</th>
<th>Status</th>
</tr>

But you have defined three in Datatables:

"columns": [
    { "data": null, render: function ( data, type, row ) {
        // Combine the first and last names into a single table field
        return '';
    } },
    { "data": "id", "defaultContent": "" },
    { "data": "status", "defaultContent": ""}
],

They need to match in number.

I'm not familiar with Java but it looks like you are returning a JSON string with an array of two objects (id, status). This looks to be correct but not sure. If this is the case then you need to convert the JSON string to a JS object using JSON.parse().

I think you should be all set if you fix those to issues.

Kevin

allan

Can you show the JSON that is being returned please? Also, can you run your table through the debugger.

Thanks,
Allan