在工廠中使用angular $ resource顯示嵌套json中的數據

Question

這是$ 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>

Answer 1

在您的代碼中，您不會從工廠返回任何東西。 請參閱jsfiddle 示例 。

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