AngularJS 从 Spring REST API 读取 JSON

Question

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

当我在 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 应该已经是构面数组，响应中没有 facetsAPI 属性，所以它实际上将 undefined 分配给 $scope.facetsList。将 response.facetsAPI 更改为 response 应该可以解决它...

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