angularjs – Angular JS：JSON数据未显示在ng-Grid中

发布时间：2020-12-17 09:41:33 所属栏目：安全来源：网络整理

导读：我已经使用Web API创建了MVC 4.0应用程序,它以 JSON格式返回数据(我使用NewtonSoft.Json将对象序列化为json),并尝试在ng-Grid中绑定数据.我正在接收以下格式的数据： "[{"Name":"FIRST_NAME","Value":"FIRST_NAME"},{"Name":"CURRENT_DATE_TIME"

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

"[{"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()).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!