Exploring the AngularJS functionality of AngularForEach within nested arrays

Question

Exploring the AngularJS functionality of AngularForEach within nested arrays

I've just started diving into AngularJS and I'm facing some challenges with using angular.forEach... Specifically, I have a data object retrieved from my REST API...

My goal is to iterate through a nested array, look for a specific attribute, and if that attribute is set to true, retrieve another attribute from the item.

Here's an example of the array structure;

orderItem:  { 
    id: 159
    name: Empanadas (Choice of 2)
    description: Choice of Diced Beef; Spinach, Stilton and Onion; or Smoked Ham and Mozzarella
    price: 700
    available: 1
    created_at: 2016-01-31 16:50:31
    updated_at: 2016-01-31 16:50:31
    menu_category_id: 41
    restaurant_id: 11
    menu_modifier_groups: 
        [  { 
            id: 9
            name: Choose 2 Empanadas
            instruction: null
            min_selection_points: 2
            max_selection_points: 2
            force_selection: 1
            created_at: 2016-02-01 01:03:35
            updated_at: 2016-02-01 01:12:23
            menu_item_id: 159
            restaurant_id: 11
                menu_modifier_items: 
                [  { 
                    id: 34
                    name: Diced Beef
                    price: 0
                    created_at: 2016-02-01 01:04:08
                    updated_at: 2016-02-01 01:04:08
                    menu_modifier_group_id: 9
                    restaurant_id: 11
                    menu_item_id: 159
                    selected: false
                 } ,  { 
                    id: 35
                    name: Smoked Salmon & Mozzarella
                    price: 0
                    created_at: 2016-02-01 01:04:37
                    updated_at: 2016-02-01 01:04:37
                    menu_modifier_group_id: 9
                    restaurant_id: 11
                    menu_item_id: 159
                    selected: true
                 } ,  { 
                    id: 36
                    name: Stilton, Spinach and Onion
                    price: 0
                    created_at: 2016-02-01 01:05:05
                    updated_at: 2016-02-01 01:05:05
                    menu_modifier_group_id: 9
                    restaurant_id: 11
                    menu_item_id: 159
                    selected: false
             }  ]
         }  ]
 }

My objective is to identify all menu_modifier_items that have selected set to true, retrieve their respective price values, sum them up, and then add the total to the original price of the orderItem.

Sum of all menu_modifier_items prices + orderItem price

$scope.calculatePrice = function(orderItem) {
    angular.forEach(orderItem, function(){
    });
}

Any assistance or guidance would be greatly appreciated.

javascript arrays angularjs

Answer 1

Answer №1

Here is a possible solution for your request:

$scope.computeTotalPrice = function(order) {
   var totalPrice = 0;

   // Loop through each group of menu modifiers
   angular.forEach(order.menu_modifier_groups, function(group) {

      // Look at each individual menu modifier item in the current group
      angular.forEach(group.menu_modifiers, function(modifier) {

         // If the item is selected, add its price to the total
         if (modifier.isSelected)
            totalPrice += modifier.cost;
   });

   order.total = totalPrice; // Add the computed total to the existing order total
};

Answer 2

Here is a possible solution for your request:

$scope.computeTotalPrice = function(order) {
   var totalPrice = 0;

   // Loop through each group of menu modifiers
   angular.forEach(order.menu_modifier_groups, function(group) {

      // Look at each individual menu modifier item in the current group
      angular.forEach(group.menu_modifiers, function(modifier) {

         // If the item is selected, add its price to the total
         if (modifier.isSelected)
            totalPrice += modifier.cost;
   });

   order.total = totalPrice; // Add the computed total to the existing order total
};

Answer 3

Answer №2

While not a direct response to your query, I lack the necessary reputation to comment on existing answers (apologies if this is not the correct protocol).

Learning Angular is valuable, but it's important to note that similar functionality can be achieved using native JavaScript functions as well, providing additional insight. The forEach function is inherent to arrays, so instead of:

angular.forEach(orderItem.menu_modifier_items, function(val) {...})

You could alternatively use:

orderItem.menu_modifier_items.forEach(function(val) {...})

For a more JavaScript-centric approach, there are other built-in functions that allow you to achieve the same outcome in a more functional manner by filtering out unwanted array values and consolidating the selected values into a single result:

var totalModifierAddOnsPrice = orderItem.menu_modifier_items.filter(function(group) {
    return group.selected; // excludes unselected groups
})
.reduce(function(itemA, itemB) {
    return itemA.price + itemB.price; // combines prices into one total value
});

The Mozilla Developer Network offers comprehensive documentation on this topic - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FArray

To clarify, while utilizing the angular forEach function is effective, the methods outlined above serve as informative alternatives.

Answer 4

While not a direct response to your query, I lack the necessary reputation to comment on existing answers (apologies if this is not the correct protocol).

Learning Angular is valuable, but it's important to note that similar functionality can be achieved using native JavaScript functions as well, providing additional insight. The forEach function is inherent to arrays, so instead of:

angular.forEach(orderItem.menu_modifier_items, function(val) {...})

You could alternatively use:

orderItem.menu_modifier_items.forEach(function(val) {...})

For a more JavaScript-centric approach, there are other built-in functions that allow you to achieve the same outcome in a more functional manner by filtering out unwanted array values and consolidating the selected values into a single result:

var totalModifierAddOnsPrice = orderItem.menu_modifier_items.filter(function(group) {
    return group.selected; // excludes unselected groups
})
.reduce(function(itemA, itemB) {
    return itemA.price + itemB.price; // combines prices into one total value
});

The Mozilla Developer Network offers comprehensive documentation on this topic - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FArray

To clarify, while utilizing the angular forEach function is effective, the methods outlined above serve as informative alternatives.

Answer 5

Answer №3

Give this a shot

$scope.calculateTotal = function(selectedItem) {
var totalCost = selectedItem.price;
angular.forEach(selectedItem.options[0].items,function(option,index){
    if(option.isSelected == true) {
        totalCost += option.price;
    }
    if(index == selectedItem.options[0].items.length-1) {
        console.log(totalCost); //final cost
    }
});

}

Answer 6

Give this a shot

$scope.calculateTotal = function(selectedItem) {
var totalCost = selectedItem.price;
angular.forEach(selectedItem.options[0].items,function(option,index){
    if(option.isSelected == true) {
        totalCost += option.price;
    }
    if(index == selectedItem.options[0].items.length-1) {
        console.log(totalCost); //final cost
    }
});

}

Exploring the AngularJS functionality of AngularForEach within nested arrays

Answer №1

Answer №2

Answer №3

Similar questions

Explore the world of textures transferring from Maya to Three.js

Tips on managing PDF files from a Web API in AngularJS

Increase the visibility of a div using Jquery and decrease its visibility with the "

Searching for the length of the greatest substring comprised of distinct characters in JavaScript

Angular.js: Utilizing ng-model for checkboxes

Utilizing a switch statement for form validation

"Is it possible for the package-lock.json file to not update when a package is removed from the

Creating a clone of a JavaScript object based on an already existing JavaScript object

Executing a javascript function numerous times

Creating dynamic links within HTML through real-time updating

servlet failing to send a response to ajax call

Is there a way to interact with a DOM element through clicking and then pass it as a variable using PHP?

"Revamping URLs in JHipster for a seamless user

Placing a blank span after the highlighted text

Continuously invoking a function until jQuery's .post method has completed loading

Is there a way to use regex to selectively color JSON keys?

What is the best way to monitor the currentUser service for updates in my navigation controller?

What is preventing me from adding content to a <p> element?

Maintain query parameters in Angular6 while routing with canActivate

What is the best method for comparing the keys and values of two arrays?