Just starting to explore the world of $resource concepts and facing a challenge with a piece of code that involves fetching data from a nested JSON. I've created a factory method that successfully retrieves the data and I can see it in the response header of the console. However, I'm struggling to actually print it out.
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 the JSON data I'm working with:
{
"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
}
]
}
}
Below is the controller I'm using:
c.controller("MenuController", function($scope, MenuFactory){
$scope.itemsList = MenuFactory.getMenuItems();
});
And here is the corresponding HTML code:
<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>