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

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.

Not the best solution but your code seems ok except the side part. Any particular problem are you facing? — Icycool
– Icycool, Commented Oct 23, 2015 at 2:49
Thanks for responding! Yeah, I'm not really generating an output when I send it over Mandrill's email API. I sent $scope.filteredmenu, but I'm not getting any output, not sure why. I got every other function sent over and those worked perfectly. — user3839044
– user3839044, Commented Oct 23, 2015 at 3:00

Miyuru Ratnayake · Accepted Answer · 2015-10-23 03:16:38Z

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/

answered Oct 23, 2015 at 3:16

Miyuru Ratnayake

4563 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3839044 Over a year ago

Thank you so much! I have it working now :), Genius!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related