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

标签 angularjs asp.net-web-api ng-grid

我使用 Web API 创建了 MVC 4.0 应用程序,该应用程序以 JSON 格式返回数据(我正在使用 NewtonSoft.Json 将对象序列化为 json)并尝试在 ng-Grid 中绑定(bind)数据。我正在接收以下格式的数据:

"[{\"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}]"

当我尝试将相同分配给数据时:ng-Grid 的每个字符都填充在不同的行上。以下是我写的javascript:
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;
//        };

});

如果像下面这样手动分配,数据将显示在网格中:
$scope.myData = [{"Name":"FIRST_NAME","Value":"FIRST_NAME"},{"Name":"CURRENT_DATE_TIME","Value":"CURRENT_DATE_TIME"},{"Name":"CLIENTID","Value":"CLIENTID"},{"Name":"CALLMODE","Value":"CALLMODE"}];

谁能帮我理解如何解决它?
当我在 filtertext 中键入值时,我还想显示过滤项目的计数。

最佳答案

http://angular-ui.github.io/ng-grid/ 中所述, 在网格中显示的数据是数组类型,并且该数组中的每个元素都映射到正在显示的行。所以我修改了我的代码,如下所示,它对我有用:

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

甚至 var myData = $.parseJSON(angular.fromJson(thisdata));也在工作。只是我们需要首先解析数据(为此我使用了 JSON.parse() )然后转换为数组(为此我使用了 $.parseJSON() )。

关于angularjs - Angular JS : JSON data is not getting displayed in ng-Grid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16309978/

相关文章:

javascript - Karma-Jasmine:期望undefined被定义+Controller+Service

javascript - 如何用 Promise 来简化这个过程

angularjs - 在 Jasmine 单元测试中调用 ng-grid 上的 selectRow

javascript - 如何在angular js中使用ng-grid和ng-tree?

javascript - AngularJS - ng-grid - 日期列问题

javascript - 如何根据 AngularJS Bootstrap UI Accordion 状态使用 ng-show 显示元素?

javascript - Angular 缓存或加载 http 请求的正确方法

c# - 在 ASP.NET Web API 中使用事务

angularjs - Node 调用异常 : Attempt to connect to Node timed out

c# - Web API 2 帮助页面是否未处理 XML 文档标记?