json data not display in ng grid in angular js?

Question

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.

check this $scope.mydata = data.data; console.log( $scope.mydata); — Manikandan Velayutham
– Manikandan Velayutham, Commented Jan 18, 2017 at 9:04
$scope.mydata = data; console.log( $scope.mydata); this one what you are getting? — Manikandan Velayutham
– Manikandan Velayutham, Commented Jan 18, 2017 at 9:59

Thailand · Accepted Answer · 2017-01-18 10:09:32Z

1

try to

$scope.mydata = data.data;

object maybe inside object

answered Jan 18, 2017 at 10:09

Thailand

931 gold badge2 silver badges10 bronze badges

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

Comments

amarmishra · Accepted Answer · 2017-01-18 10:55:08Z

0

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.)

answered Jan 18, 2017 at 10:55

amarmishra

6136 silver badges15 bronze badges

1 Comment

amarmishra Over a year ago

You will have make a plunkr with your code. Here use this plukr and update it with you code: plnkr.co/edit/aprCGm8uvY1kzDOr8Avu?p=preview updated

Collectives™ on Stack Overflow

json data not display in ng grid in angular js?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related