Angular JS: JSON data is not getting displayed in ng-Grid
angularjs, asp.net-web-api, ng-grid
Solution
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()`).
Problem
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.