Angular JS: JSON data is not getting displayed in ng-Grid

Question

I have created MVC 4.0 app using Web API which returns data in JSON format (I am serializing object to json using NewtonSoft.Json) and trying to bind data in ng-Grid. I am receiving data in following format:

"[{\"Name\":\"FIRST_NAME\",\"Value\":\"FIRST_NAME\"},{\"Name\":\"CURRENT_DATE_TIME\",\"Value\":\"CURRENT_DATE_TIME\"},{\"Name\":\"CLIENTID\",\"Value\":\"CLIENTID\"},{\"Name\":\"CALLMODE\",\"Value\":\"CALLMODE\"}, {\"Name\":\"new 321\",\"Value\":null}]"

When i tried to assign same to data: of ng-Grid, each char populated on different row. following is the javascript i have written:

var guidesRespApp = angular.module('guidesRespApp', ['ngGrid']);

//Get Data from restful API.
guidesRespApp.controller('MyCtrl', function ($scope, $http) {
    $http.get('/api/datadictionary').success(function (thisdata) {
            $scope.myData  =  thisdata;
    });

     $scope.filterOptions = {
        filterText: '',
        useExternalFilter: true,
    };


    //Setting grid options
    $scope.gridOptions = {
      data: 'myData',
      multiSelect: true,
      filterOptions: { filterText: '', useExternalFilter: false },
      enableRowReordering: false,
      showGroupPanel: false,
      maintainColumnRatios: false,
      groups: [],
      showSelectionCheckbox: true,
      showFooter: true,
      enableColumnResize: true,
      enableColumnReordering: true
    };


//    $scope.totalFilteredItemsLength = function() {
//        //return self.filteredRows.length;
//        };

});

If manually assigned like below, data is getting displayed in grid:

$scope.myData = [{"Name":"FIRST_NAME","Value":"FIRST_NAME"},{"Name":"CURRENT_DATE_TIME","Value":"CURRENT_DATE_TIME"},{"Name":"CLIENTID","Value":"CLIENTID"},{"Name":"CALLMODE","Value":"CALLMODE"}];

can anyone please help me to understand how to fix it? Also i wanted to display count of filtered items when i key in values in filtertext.

Chaitanya Kale · Accepted Answer · 2013-05-01 14:22:02Z

10

As mentioned on http://angular-ui.github.io/ng-grid/ , Data being displayed in the grid is of type array and each element in that array mapped to a row being displayed. So I modified my code like below and it worked for me:

$http.get('http://localhost:12143/api/datadictionary').success(function (thisdata) {
    //Convert data to array.
    var myData =  $.parseJSON(JSON.parse(thisdata));
    $scope.myData  =  myData; 
});

even var myData = $.parseJSON(angular.fromJson(thisdata)); also working. Just we need first to parse the data (for this I used JSON.parse()) and then convert to array (for this i used $.parseJSON()).

answered May 1, 2013 at 14:22

Chaitanya Kale

1811 gold badge1 silver badge6 bronze badges

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

1 Comment

yantaq Over a year ago

This saved me hours. I had the same issue. in my case thisdata is response object so I had to use var $scope.myData = $.parseJSON(JSON.parse(thisdata.data)); Thanks C K.

Community · Accepted Answer · 2017-05-23 10:30:11Z

3

Try changing the get callback to one of the following:

$http.get('/api/datadictionary').success(function (thisdata) {
        $scope.myData  =  JSON.parse(thisdata);
        // or
        $scope.myData = angular.fromJson(thisdata);
});

Reference this with regards to how webapi is returning json. ASP.NET WebAPI: How to control string content returned to client?

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Apr 30, 2013 at 22:45

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

1 Comment

user554180 Over a year ago

I had to do this var myData = angular.fromJson(angular.fromJson(data));

Collectives™ on Stack Overflow

Angular JS: JSON data is not getting displayed in ng-Grid

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related