在AngularJS应用程序中使用来自WebApi的JSON数据

时间:2015-05-31 15:07:33

标签: json angularjs asp.net-web-api

我从WebApi获取了一些数据,答案(在获取数据的代码下面)是JSON。但我无法从angularJS访问此结果。数据如下:

{
  "$id": "1",
  "result": [
    {
      "$id": "2",
      "name": "Français",
      "code": "FR",
      "id": 1
    },
    {
      "$id": "3",
      "name": "Néerlandais",
      "code": "NL",
      "id": 2
    },
    {
      "$id": "4",
      "name": "English",
      "code": "EN",
      "id": 3
    }
  ]
}

但是当我尝试显示结果时,我收到以下错误:

data.result is undefined

我得到这样的数据:

(function () {
    angular.module('myApp')
        .factory('dataService', ['$q', '$http', dataService]);

    function dataService($q, $http) {
        return {
            initFormCustomer: initFormCustomer
        };

        function initFormCustomer() {
            return $http({
                method: 'GET',
                url: 'http://localhost:123456/api/forminit/customer/',
                headers: {
                },
                transformResponse: transformCustomer,
                cache: true
            })
            .then(sendResponseData)
            .catch(sendGetCustomerError)
        }

        function sendResponseData(response) {
            return response.data;
        }

        function transformCustomer(data, headersGetter) {
            var transformed = angular.fromJson(data.result);
            console.log(data.result[0]);
            return transformed;
        }

        function sendGetCustomerError(response) {
            return $q.reject('Error retrieving customer(s). (HTTP status: ' + response.status + ')');
        }
    }
}());

控制器:

(function () {

    angular.module('myApp')
        .controller('customerController', ['$location', '$scope', 'dataService', CustomerController]);

    function CustomerController($location, $scope, dataService) {
        var vm = this;

        vm.languages = dataService.initFormCustomer();
    }

}());

1 个答案:

答案 0 :(得分:1)

我认为转换函数获取一个json字符串,在将其用作对象之前必须反序列化...尝试类似:

function transformCustomer(data, headersGetter) {
        var transformed = angular.fromJson(data);
        console.log(transformed.result[0]);
        return transformed.result;
    }

此外,您可以查看文档https://docs.angularjs.org/api/ng/service/ $ http。有一些代码显示如何将转换附加到默认转换(进行反序列化和XSRF检查)