如何从Javascript / Typescript中的数组对象计算运行总计并使用HTML在每个实例中显示输出？

Question

I am working on a MEAN stack project and have an array that looks like this:

savings: any = [300, 450, 350, 500]

I also have a variable called savings_bf, which is savings brought forward retrieved from a DB with the value below.

savings_bf = 15000 

I would like to write some code with typescript to get the running total, factor in the savings_bf into the calculation,and display the output with HTML.

As i have stated, this is for a MEAN stack application using Typescript 3.5.3. The output works as expected on the console, but the problem is replicating the output on the front-end.

The code i have so far is:

this._savings_total = +this.savings.reduce((result, a) => {
            var savings_amount = a.savings_amount;
            return result + savings_amount;
          }, this.savings_bf);

,and displaying the output in html as;

<p>{{_savings_amount}}</p>

The expected HTML output should be:

15300,15750,16100,16600,
but the actual output is the final value 16600

Answer 1

The problem in your code is you're overriding value of this_savings_bf in each iteration, You should simply map through the values and use a variable to keep track of last add value

 let savings = [300, 450, 350, 500] let savings_bf = 15000 let temp = savings_bf let final = savings.map(v => temp += v) console.log(final) 

Or you can simply use forEach build html string in each iteration and at the end of loop add to desired place

 let savings = [300, 450, 350, 500] let savings_bf = 15000 let html = '' savings.forEach(v=>{ savings_bf += v html += `<p>${savings_bf}</p>` }) document.getElementById('test').innerHTML = html 

 <div id='test'/> 

---

What if i intend for my output to begin with the initial value of savings_bf

 let savings = [300, 450, 350, 500] let savings_bf = 15000 let html = '' savings.forEach(v => { html += `<p>${savings_bf}</p>` savings_bf += v }) html += `<p>${savings_bf}</p>` document.getElementById('test').innerHTML = html 

 <div id='test' />