Angular JS: Dữ liệu JSON không được hiển thị trong ng-Grid

Question

Tôi đã tạo ứng dụng MVC 4.0 sử dụng API Web trả về dữ liệu ở định dạng JSON (Tôi đang sắp xếp đối tượng vào json bằng NewtonSoft.Json) và cố gắng kết hợp dữ liệu trong ng -Grid. Tôi nhận dữ liệu ở định dạng sau:

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

Khi tôi đã cố gắng để gán cùng một số liệu: các ng-Lưới, mỗi char dân cư trên dãy ghế khác. Sau đây là javascript i đã viết:

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; 
//  }; 

}); 

Nếu tay giao như dưới đây, dữ liệu được nhận được hiển thị trong lưới:

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

có thể bất cứ ai hãy giúp tôi hiểu làm thế nào để sửa chữa nó? Ngoài ra, tôi muốn hiển thị số lượng các mục được lọc khi tôi nhập các giá trị trong bộ lọc.

Answer 1

Như đã đề cập trên http://angular-ui.github.io/ng-grid/, Dữ liệu được hiển thị trong lưới là loại mảng và mỗi phần tử trong mảng đó ánh xạ tới một hàng đang được hiển thị. Vì vậy, tôi đã sửa đổi mã của tôi như dưới đây và nó đã làm việc cho tôi:

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

thậm chí var myData = $.parseJSON(angular.fromJson(thisdata)); cũng hoạt động. Chỉ cần chúng ta cần phân tích cú pháp dữ liệu (cho điều này tôi đã sử dụng JSON.parse()) và sau đó chuyển đổi thành mảng (cho tôi đã sử dụng $.parseJSON()).

Answer 2

Hãy thử thay đổi get gọi lại cho một trong các cách sau:

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

Reference này liên quan đến cách WebAPI đang trở lại json. ASP.NET WebAPI: How to control string content returned to client?