combine data in nested ng-repeat loops

I am looking to calculate the total labour cost for each taskAssembly object and then store it in the totalLabour field.

For reference, you can view this plunker: http://plnkr.co/edit/rKnup0IIPRYvh8JLHXbD?p=preview

Here is a snippet of my data:

{ "client": "client1","takeoff": [{
"taskName": "ToW",
 "taskQnt": 2300,
"totalLabour":"",
"taskAssembly": [
  {
    "taskName": "ToW",
    "taskQnt": 2300,
    "taskLabour": 22,
    "taskAssembly": [
  { "qnt": 2300, "product": "non-INT", "labour": 12, "application":      "spray" },
  { "qnt": 2300, "product": "non-INT", "labour": 10, "application": "strips" }
    ]
  },
      {
       "taskName": "Pens",
       "taskQnt": 43,
        "taskLabour": 23,
        "taskAssembly": [
           { "qnt": 43, "product": "non-INT", "labour": 23, "application": "spray" }
           ]
       }
    ]}

The current code I have is not achieving the desired outcome. It looks like this:

 $scope.getTotalLabour = function(){
    var total = 0;
    for(var i = 0; i < $scope.estimate.takeoff.length; i++){
      var item = $scope.estimate.takeoff[i];
      total += (item.taskLabour);
    }
    return $scope.estimate.totalLabour = total;
  }

Does anyone have suggestions on how I could improve this functionality?

javascriptangularjsangularjs-ng-repeat

Answer №1

To see the code in action, you can view the live demonstration here: JSFiddle

To implement this functionality, all you need to do is set up a nested loop as shown below:

for(var i = 0; i < $scope.estimate.takeoff.length; i++){
  var total = 0;
  var item = $scope.estimate.takeoff[i];
  console.log(item);
  for (var j = 0; j < item.taskAssembly.length; j++) {
    total += (item.taskAssembly[j].labour);
  }
  item.totalLabour = total;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Centered iframe within a div

I am trying to center my iframe within a white box and need some assistance with this. I want the iframe to be in the middle of the white box rather than its current position at the moment. game1.html: <html> <head> <title>R ...

javascripthtml

Issue with Generating divs dynamically in Ionic Framework

I'm currently working on dynamically generating a board game using divs in AngularJS, like so: HTML: <div class="boardgame" ng-repeat="square in board"> <div class="square"></div> </div> JS: $scope.board = [ {value: ...

javascripthtmlcssangularjsionic-framework

Different methods for modifying the height of an Angular datatable in response to the data provided

Encountering an issue with adjusting the height of a datatable when calling a webservice to populate it. A webpage features a collapsible div element alongside a datatable. Upon collapsing the div, the table's height is calculated and resized using i ...

javascriptjquerycssangularjs

What could be the reason for the GET request not functioning properly in Node.js?

const express = require('express'); const mongoose = require ("mongoose"); const app = express(); const Student = require('../models/students'); require('dotenv').config(); const PORT = process.env.PORT || 3000; const co ...

javascriptnode.jsangularmean

Tips for transforming an array of images (from an input field) into a JSON string

After creating an array of images using var a = Array.from(document.getElementById("id").files); I tried to generate a JSON string of that array using var b = JSON.stringify(a); However, all I get is an empty array. It seems like this issue is common w ...

javascriptarraysjson

Angular's ng-include functionality allows developers to dynamically load

As a beginner in angular.js, I've written my first 'hello world' script. I'm attempting to use ng-include to bring in a navbar from the local file /templates/nav.html. Despite following a tutorial closely, I'm struggling to underst ...

javascriptangularjs

JavaScript does not allow the use of variables outside of functions

As someone diving into the world of Javascript after working extensively with server-side languages like PHP, I've noticed a peculiar issue. It seems that I am unable to access variables defined outside of a function from within the function itself. T ...

javascript

Customize drawerLabel in React Native based on user's current location

I am facing an issue with my react-native application where I need to dynamically render a menu item based on the user's location. However, since the function that fetches the user location is asynchronous, I am encountering an undefined error. My que ...

javascriptreactjstypescriptreact-nativeasynchronous

Automatically reloading in AngularJS

What is the best method for automatically refreshing an AngularJS single page app in the browser whenever changes are made to its code? In simpler terms, how can I set it up so that when I update the HTML code of my AngularJS app in my code editor and sav ...

angularjs

Press the button to update several span elements

Imagine I have multiple span elements like this: <span>A</span> <span>B</span> <span>C</span> <span>D</span> and a div element (which will be converted to a button later) named "change". <div id="chan ...

javascriptjqueryhtmlcss

Is it possible to reference the prior value of a computed Angular signal in any way?

Is it possible to dynamically add new values from signal A to the existing values in signal B, similar to how the scan operator works in RxJS? I am looking for something along the lines of signalB = computed((value) => [...value, signalA()]). Any sugg ...

javascriptangulartypescriptrxjssignals

Unable to navigate using ui-sref or $state.go in initial directive execution

There seems to be an issue with my ng-repeat on a directive where I'm passing in 3 pieces of information. The directive includes a button that is supposed to pass that information on to another view using params like this: ui-sref='profiles.sho ...

javascriptangularjsangularjs-directiveangular-ui-router

Establishing a connection to MongoDB using JavaScript

Currently, I'm working on a fun little project revolving around a web calendar. For this project, I've decided to integrate mongoDB into it. Fortunately, I have successfully configured MongoDB and established a connection with PHP. However, I am ...

javascriptnode.jsmongodb

Express.js's Handlebars failing to render elements from an array

I am currently developing an Express.js application that utilizes Handlebars for templating. One of the routes in my application fetches station data from MongoDB using Mongoose and then passes it to a Handlebars template. Although most of the data is bein ...

javascriptnode.jsexpresshandlebars.js

Nodejs is encountering difficulties in transmitting precise error messages to the browser

I am encountering an issue in my nodejs application with error handling. Despite setting up specific error messages, the browser receives a generic error object instead. The error messages are only visible in the nodejs console and not on the browser which ...

javascriptnode.jsvue.js

Tips for adjusting the up and down controls and spins of a date input after modifying its height

After adjusting the height of my inputs (date type) to 40px, I noticed that the up and down controls are no longer aligned with the text inside the field. I am looking for a solution to either adjust the height of the spins or remove them if necessary in ...

javascriptjquerycsshtml

JavaScript function for submitting form data using AJAX and performing validation

This is the code I have been working on: $(function () { $('.contact-form').submit(function (event) { $(this).find("input , textarea").each(function () { var input = $(this); if (input.val() == "") { ...

javascriptjqueryhtmlajax

Model data is missing from the form submission

I recently created a basic HTML POST form with a model embedded within it. Here is the link to view the demo: https://jsfiddle.net/pilotman/rn9gspz8/6/ Keep in mind that the JS fiddle example is just for demonstration purposes and may not be flawless. Af ...

javascriptphphtmlformsbootstrap-4

Detecting when the page is done loading in CasperJS with the help of $.ajaxStop()

During my CasperJS tests, I've relied on waitForSelector() to check if a page has finished loading, including all asynchronous AJAX requests. However, I'm interested in finding a more standard approach for waiting for page load. Is it possible to ...

javascriptjqueryajaxphantomjscasperjs

Revise the data model by using option IDs instead of option values in the selection dropdown

Just getting started with angular js and facing an issue. I have a json value that will determine the content of my html. Specifically, I need to populate a select dropdown with two options and have one automatically selected based on the flag provided in ...

htmlangularjsangular-ngmodel