AngularJS从Spring REST API读取JSON

Question

我是AngularJS的新手，我正在将现有的基于Spring MVC的Web应用程序迁移到它。 最棒的是我删除了很多操作从Spring控制器返回的JSON的JS。

当我在Angular控制器中手动分配JSON时，我可以正常工作。 我的问题是当我使用$ http从我的Spring MVC控制器检索数据时，尽管我得到了有效的响应（200）并且FF显示了结构良好的JSON，但它似乎无法工作。

我甚至可以在服务中打印出JSON并看到它是正确的。

我现在已经盲目地看着这个，我希望这是一个基本的变量赋值错误，我已经做了。

我的app.js是

'use strict';

// Angular app level module which depends on controllers, and services
angular.module('WebClient', [
    'WebClient.controllers',
    'WebClient.services'
]);

下面是Angular控制器，注释掉的测试代码与从Spring控制器返回的JSON相同。 当我取消注释测试代码时，一切都按预期工作，Batarang向我展示了一个格式很好的模型。

我的controllers.js是：

'use strict';

// K,V pairs of facets to search hits

angular.module('WebClient.controllers', []).
    controller('facetsController', function($scope, facetsAPI) {
        $scope.facetsList = [];
        $scope.mychecker = true;

        facetsAPI.getFacets().success(function (response) {
            $scope.facetsList = response.facetsAPI;
            console.log("Controller successfully got facets");
            console.log($scope.facetsList);
            console.log(response.facetsAPI);

//        $scope.facetsList = [
//            {
//                "id": "type",
//                "name": "type",
//                "facet-fields": [
//                    {
//                        "id": "contents",
//                        "count": 44008,
//                        "name": "contents"
//                    },
//                    {
//                        "id": "lessons",
//                        "count": 0,
//                        "name": "lessons"
//                    },
//                    {
//                        "id": "sentences",
//                        "count": 0,
//                        "name": "sentences"
//                    },
//                    {
//                        "id": "all",
//                        "count": 44008,
//                        "name": "All"
//                    }
//                ]
//              }
//          ]


        });
    });

服务中的$ http请求确实从Spring正确检索数据，调试行到console.log（data）输出格式良好的JSON。 该服务是我看到有效数据的最后一点。 在这一点之后，记录语句和Batarang不再看到有效数据。

我的services.js是：

angular.module('WebClient.services', []).
    factory('facetsAPI', function($http) {

        var facetsAPI = {};

        facetsAPI.getFacets = function() {
            return $http({url: 'http://localhost:8080/api/facets'})
                .success(function(data, status, headers, config) {
                    // this callback will be called asynchronously
                    // when the response is available
                    console.log("Success getting JSON");
                    console.log("Status: " + status);
                    console.log(data);
                })
                .error(function(data, status, headers, config) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
                console.log("Error getting JSON");
                console.log("Status: " + status);
            });
        }

        return facetsAPI;
    });

我的Spring控制器执行所有搜索操作和方面计算并返回JSON。 我已经确认这个JSON在Jsonlint.com上有效。 （我知道一些搜索操作可以通过Angular更好地完成，但我们正在逐步进行重构，而我现在正专注于这些方面）

    @RequestMapping(value = "/api/facets", produces = MediaType.APPLICATION_JSON_VALUE, method = RequestMethod.GET)
    public @ResponseBody String getFacets() {


    // Store all facets in a list for later conversion to JSON array
    List<Object> listOfFacets = new ArrayList<Object>();

    ...
    ...
    ...

    // Add all the facets to a single map for conversion to JSON
    Map<String, Object> outerMap = new HashMap<String, Object>();
    outerMap.put("facets", listOfFacets);

    JSONArray facetsAsJson = new JSONArray(listOfFacets);
    return facetsAsJson.toString();
}

任何帮助表示赞赏。

Answer 1

response应该已经是facet数组， response上没有facetsAPI属性，所以它实际上是将undefined赋值给$scope.facetsList 。 将response.facetsAPI更改为response应修复它...

facetsAPI.getFacets().success(function (response) {
    $scope.facetsList = response;
    // ...
}