在工厂中使用angular $ resource显示嵌套json中的数据

Question

Am new to $resource concepts and am stuck with this piece of code where am just trying to fetch data from a nested json. I have my factory method that is able to fetch the data and is in the response header of the console. But am unable to retrieve it for printing.

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

        },


    }
})

Here is my 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
                }
              ]
            }
}

Here is my controller:

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


    $scope.itemsList = MenuFactory.getMenuItems();


});

And the 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

In your code, you are not returning anything from the factory. Refer jsfiddle example .

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

Controller Code

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