在工厂中使用角度 $resource 来显示来自嵌套 json 的数据答案

【问题标题】：Using angular $resource in a factory to display data from nested json在工厂中使用角度 $resource 来显示来自嵌套 json 的数据
【发布时间】：2018-02-19 08:37:39
【问题描述】：

我是 $resource 概念的新手，我被这段代码困住了，我只是想从嵌套的 json 中获取数据。我的工厂方法能够获取数据并且位于控制台的响应标头中。但我无法检索它进行打印。

var f = angular.module("FactModule", ['ngResource']);

f.factory("MenuFactory", function($resource){
    var menuitems =[];
    var menuResource =[];
    var menuResource = $resource("http://localhost:3000/items/:id", {"id":"@mid"},{myupdate:{method: "PUT"}})
    return {
        getMenuItems: function(){                  
         menuitems = menuResource.get();

            console.log(menuitems); 

        },


    }
})

这是我的json

{
    "items":
            {
                "wsmenuitems": [
                {
                  "code": "AB201",
                  "name": "ABCD",
                  "price": "20.5",
                  "description": "ABCD",
                  "id": 2
                },
                {
                  "code": "901",
                  "name": "XYZ",
                  "price": "25",
                  "description": "XYZ,
                  "id": 5
                }
              ],
               "wsorderitems": [
                {
                  "code": "AB201",
                  "name": "XYA",
                  "price": "20.5",
                  "description": "XYA",
                  "id": 2
                },
                {
                  "code": "901",
                  "name": "PQR",
                  "price": "25",
                  "description": "PQR",
                  "id": 5
                }
              ]
            }
}

这是我的控制器：

c.controller("MenuController", function($scope, MenuFactory){


    $scope.itemsList = MenuFactory.getMenuItems();


});

还有 HTML：

<tr ng-repeat="menuitem in itemsList">
                    <td>{{$index}}.{{menuitem.name}}</td>
                    <td>{{menuitem.price}}</td>
                    <td><button class="btn btn-primary" ng-click="placeOrder(menuitem)" ng-disabled="itemAdded($index)">Order <i class="glyphicon glyphicon-shopping-cart"></i></button></td>
                </tr>

【问题讨论】：

您没有从 MenuFactory 返回任何内容。你怎么称呼工厂？
尝试返回菜单项...但出现错误。在范围变量的控制器中访问它。现在我的菜单项包含以下内容：Resource {$promise: d, $resolved: false} $promise : d {$$state: {...}} $resolved : true wsmenuitems : (2) [{...}, {...}] wsorderitems : (2) [{...}, {...}] proto : Object... 我需要访问每个尝试做的 wsmenuitems .get({id:1}) 但没有帮助
你能把你的控制器代码和问题一起添加吗？
添加控制器代码
检查我的答案

标签： javascript angularjs json

【解决方案1】：

在您的代码中，您不会从工厂返回任何东西。参考jsfiddleexample。

var f = angular.module("FactModule", ['ngResource']);

f.factory("MenuFactory", function ($resource) {
    var menuitems = [];
    var menuResource = [];
    var menuResource = $resource("http://localhost:3000/items/:id", {
        "id": "@mid"
    }, {
        myupdate: {
            method: "PUT"
        }
    })
    return {
        getMenuItems: function () {
            return menuResource.get().$promise;
        },
    }
})

控制器代码

MenuFactory.getMenuItems().then((data) => {
    $scope.itemsList = data;
}).catch((err) => {
    console.log(err);
})

【讨论】：