Javascript AngularJS从SpringRESTAPI读取JSON

我是AngularJS的新手，我正在将现有的基于SpringMVC的web应用迁移到AngularJS上。最棒的是，我删除了很多处理从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相同。当我取消对测试代码的注释时，一切都按预期进行，巴塔朗向我展示了一个格式良好的模型

My 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（数据）输出格式良好的JSON。该服务是我看到的最后一个有效数据点。在这一点之后，日志语句和Batarang再也看不到有效数据了

My 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。我已在Jsonlint.com上确认此JSON有效。（我知道使用Angular可以更好地进行一些搜索操作，但我们正在逐步重构，目前我主要关注这些方面）

@RequestMapping（value=“/api/facets”，products=MediaType.APPLICATION\u JSON\u value，method=RequestMethod.GET）
public@ResponseBody字符串getFacets（）{

//将所有方面存储在列表中，以便以后转换为JSON数组
List ListoFacets=新的ArrayList（）；
...
...
...
//将所有方面添加到单个映射以转换为JSON
Map outerMap=newhashmap（）；
外部映射放置（“面”，面列表）；
JSONArray facetsAsJson=新的JSONArray（列表面）；
返回facetsAsJson.toString（）；
}

---

非常感谢您的帮助。

response

应该已经是facet数组，响应上没有

facetsAPI

属性，因此它实际上是在将

未定义的
赋值给
$scope.facetsList
。将
response.facetsAPI
更改为
response
应该可以修复它

在您的服务中，您已经将一个success函数绑定到$http promise，但在控制器中也会这样做。第二个可能没有注册成功吗？您是否已打印出“控制器成功获取面”？从$http返回的响应也是字符串还是经过解析的JSON？也许可以试试：$scope.facetsList=JSON.parse（response）.facetsList；谢谢#eshortie两者。正在注册成功函数，因为我可以在控制台中看到来自控制器的调试，即“控制器成功获取facets”和来自服务的“成功获取JSON”。因此，两个成功函数都是注册和启动。根据Anthony下面的回答，根本原因是我错误地解释了$http的响应结构。有一次我修好了所有的灯都变绿了，它开始按预期工作。谢谢安东尼，就是这样。我跟着一个教程走，把它放在那里，没有质疑它应该做什么。既然你已经指出了这一点，我就明白了。

    @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();
}

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