Getting out values from an array using angular.foreach in $scope - arrays

Question

I have a dynamically changing array based on another code and I'm trying to retrieve specific data from the same.
Here is a sample of one dynamically generated array under $scope.filtereditem:
[{
"active": true,
"createdAt": "2015-10-05T20:19:58.264Z",
"desc": "With arugula, smoked almonds & chipotle vinaigrette",
"flavors": [{
"active": true,
"name": "Chocolate",
"price": 8
}, {
"active": false,
"name": "Strawberry",
"price": 8
}, {
"active": false,
"name": "Hazelnut",
"price": 8
}, {
"active": false,
"name": "Mint",
"price": 8
}],
"img": "https://signsrestaurant.ca/wp-content/uploads/2015/09/Watermelon-Quinoa-Jimaca-Salad.jpg",
"name": "Watermelon Quinoa Jicama Salad (<span class=\"vegan\">VE</span>, <span class=\"gfree\">GF</span>, <span class=\"dfree\">DF</span>)",
"objectId": "x1zpkWmvmP",
"price": 14,
"qty": 1,
"sides": [{
"active": false,
"name": "Soup"
}, {
"active": false,
"name": "Salad"
}, {
"active": false,
"name": "Fries"
}],
"sizes": [{
"active": false,
"name": "Small",
"price": 5
}, {
"active": true,
"name": "Medium",
"price": 10
}, {
"active": false,
"name": "Large",
"price": 15
}],
"type": "Soup",
"updatedAt": "2015-10-21T18:09:37.499Z"
}, {
"active": true,
"createdAt": "2015-10-05T20:35:01.363Z",
"desc": "Buffalo mozzarella, tomato, marinated artichoke hearts, black olives, pesto & balsamic drizzle",
"flavors": [{
"active": false,
"name": "Vanilla",
"price": 8
}, {
"active": false,
"name": "Almond",
"price": 8
}, {
"active": true,
"name": "Hazelnut",
"price": 8
}, {
"active": false,
"name": "Caramel",
"price": 8
}],
"img": "https://signsrestaurant.ca/wp-content/uploads/2015/09/Mediterranean-Salad.jpg",
"name": "Mediterranean Salad (<span class=\"veg\">V</span>, <span class=\"gfree\">GF</span>)",
"objectId": "nI5VSpdBUn",
"price": 15,
"qty": 2,
"sides": [{
"active": false,
"name": "Soup"
}, {
"active": false,
"name": "Salad"
}, {
"active": false,
"name": "Fries"
}],
"sizes": [{
"active": false,
"name": "Small",
"price": 0
}, {
"active": true,
"name": "Medium",
"price": 5
}, {
"active": false,
"name": "Large",
"price": 10
}],
"type": "Salad",
"updatedAt": "2015-10-21T18:09:33.422Z"
}]
That is just a sample and the array changes dynamically based on another code. What I wish to achieve is to retrieve certain data in the form of a scope element, let's name it as $scope.filteredmenu
This is where I'm stuck at. Here is what I have so far for this:
$scope.filteredmenu = function() {
var order = " ";
var side = " ";
angular.forEach($scope.filtereditem, function(item) {
var flavor = " ";
var size = " ";
order += item.name + "Qty: " + item.qty + " , ";
side += "Side: " + item.type + " , ";
angular.forEach(item.flavors, function(option) {
if (option && option.active) {
flavor += "Flavor: " + option.name + " , ";
}
});
angular.forEach(item.sizes, function(option) {
if (option && option.active) {
size += "Size: " + option.name + " , ";
}
});
menuorder += order + side + size + flavor;
});
return menuorder;
};
Basically, I need the output in this format:
For each item,
'item.name' Qty: 'item.qty', Side: 'item.type', Flavor (whichever is active): option.name (in item.flavors), Size (whichever is active): option.name (in item.sizes)
Eventually, I'm trying to send the result $scope.filteredmenu via an email API. I'm not sure what I'm doing wrong. Any help with this code would be much appreciated.

Answer 1

There were some syntax errors:
var output = function() {
var order = " ";
var side = " ";
//Not defined
var menuorder = '';
angular.forEach($scope.filtereditem, function(item) {
var flavor = " ";
var size = " ";
order += item.name + "Qty: " + item.qty + " , ";
//plus sign was missing
side += "Side: " + item.type + " , ";
angular.forEach(item.flavors, function(option) {
if (option && option.active) {
flavor += "Flavor: " + option.name + " , ";
}
});
angular.forEach(item.sizes, function(option) {
if (option && option.active) {
size += "Size: " + option.name + " , ";
}
});
menuorder += order + side + size + flavor;
});
return menuorder;
}
$scope.filteredmenu = output();
here is the working JSFiddler https://jsfiddle.net/hefc5ewe/