CODEWITHSUNDEEP
angularjsjsonangularejb
Sejal Rudani
Sejal Rudani

Reputation: 412

json data not display in ng grid in angular js?

I am working on one project which is based on EJB, AngularJS, restful web services and JPA.

I have created a web service and it will return data from database in JSON format to client.

At client side, I want to display this JSON data in ng-grid but the data not getting displayed.

Below is my code:

JS code

dashboard.controller('MainController', function($scope, $http) {
    $http.get('http://localhost:8080/WebApplication2/rest/testentity').
    success(function(data) {
        $scope.mydata = data;
        console.log("data response : " + $scope.mydata);
    });
    $scope.gridOptions = {
        data: $scope.mydata,
        enableRowSelection: false,
        enableCellEditOnFocus: true,
        multiSelect: false,
        columnDefs: [{
                field: 'id',
                displayName: 'id',
                enableCellEdit: false
            },
            {
                field: 'testname',
                displayName: 'testname',
                enableCellEdit: false
            },
            {
                field: '',
                displayName: 'Save',
                enableCellEdit: false,
                cellTemplate: '<button id="editBtn" type="button"  ng-click="saveItem(row.entity.testname)" >Save</button>'
            }
        ]
    };
});

In the console, it will display proper data

console Output 

 data response : [object Object],[object Object]

Please suggest what is wrong with my code.

Upvotes: 0

Views: 79

Answers (2)

amarmishra
amarmishra

Reputation: 613

This maybe the case that, the ng-grid is being initialized before the data is actually available in the scope i.e in $scope.datafrom service. If that maybe the case you have to write the initialization after the service has return successfully. Try these 2 options. 1st: You can write '$scope.gridOptions' initialization inside the $http success block. Example code can be:

$http.get('http://localhost:8080/WebApplication2/rest/testentity').
success(function(data) {
    $scope.mydata = data;
    console.log("data response : " + $scope.mydata);
    initializeGridOptions();
});
var initializeGridOptions = function(){
     $scope.gridOptions = {
       data: $scope.mydata,
       .....,
       .....
     };

};

OR 2nd: You can write the initialization inside a $timeout

$timeout(function(){
    $scope.gridOptions = {
       data: $scope.mydata,
       .....,
       .....
     };

}, 200);

$timeout service will wait for some time(200ms) here before exceuting the code, so we can expect service to return the data by then.(You can further increase the time if you want.)

Upvotes: 0

Thailand
Thailand

Reputation: 93

try to

$scope.mydata = data.data;

object maybe inside object

Upvotes: 1

Related Questions