Achieving a cumulative running balance using Vue js for nested arrays

I am looking to calculate the running balance by subtracting AmountApplied from Amort. Here is the desired output:

Line  Amort     Total Payment     Running Balance
 1    30250         10000             20250.00
      30250         20250             0.00
 2    30250         30250             0.00

In my Vue component:

<table>
//...
<tbody v-for="(fetch,count,idx) in soaData">
<tr>
 // code
</tr>
<template v-for="(subFetch,count) in fetch.subPayments" >
<tr>
    <td class="text-right">{{subFetch.AmountApplied | formatNum}}</td>
    <td class="text-right">{{getRunningBal(fetch.subPayments,fetch.amortId)}}</td>
</tr>
</template>
</tbody>
</table>

Inside my methods:

   getRunningBal(subPayments,amortId){

        let subpayCount = Object.values(this.soaData[amortId].subPayments).length
        let data = Object.values(this.soaData[amortId].subPayments)

        var total = 0;
        for(let i=0; i < subpayCount; i++){              
        return total += data[i].AmountApplied)
        }

Sample data structure:

{
        "267": {
            "Ndays": 9,
            ...
        },
        "270": {
            "Ndays": 12,
            ...
        }
    }

Answer №1

With the nested array index utilizing ID as the index, I structured it as v-

for="(subFetch,key,count) in fetch.subPayments"
, ensuring that the index starts from 0.

<table>
//...
<tbody v-for="(fetch,count,idx) in soaData">
<tr>
 // code
</tr>
<template v-for="(subFetch,key,count) in fetch.subPayments" >
<tr>
    <td class="text-right">{{subFetch.AmountApplied | formatNum}}</td>
    <td class="text-right">{{getRunningBal(fetch.subPayments,fetch.amortId)}}</td>
</tr>
</template>
</tbody>
</table>

I utilized the index of subPayments to calculate the sum of each line, yielding successful results.

    getRunningBal(subPayments,amortId, count){    
    let subpayCount = Object.values(this.soaData[amortId].subPayments).length
    let data = Object.values(this.soaData[amortId].subPayments)

    var total = 0;
    for(let i=0; i <= count; i++){              
     total += data[i].AmountApplied
    }
        return 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

Axios is unable to retrieve data in React render, but it is successful when accessed through the console

I am currently in the process of developing an e-commerce website and encountering an issue with rendering image data stored in MongoDB. The goal is to fetch the image data using axios and display it on the website. However, despite successfully fetching t ...

What is causing the recursion function to return "NaN" in this scenario?

I'm trying to calculate the total sum of absolute differences between consecutive elements in an array using a function called sumAbsArr, but it seems to be returning NaN. var arr = [1, 5, 2]; var n = 3; var cur = 0; console.log(sumAbsArr(arr, n, ...

I need to display the product name associated with the product_id found in the line_items array within the order table. I aim to achieve this functionality by utilizing Laravel with Vue.js

In my database, there is a cell called line_items in the orders table that contains data like: [ {"customer_id":"30","product_id":"10","unit_id":"2","quantity":"1","price":"2700","total_price":"2700"}, {"customer_id":"30","product_id":"43"," ...

Filtering data on objects in Angular can be achieved by utilizing the built-in

Retrieving data from the backend using this function: private fetchData(): void { this.dataService.fetchData().pipe( tap((response: any) => { this.persons = response.results; this.familyMembersTrue = this.persons.filter(x =&g ...

Integrate Chrome extension using code

Is there a way to programmatically load a Chrome extension? Can it be done using web driver with external extension preferences, or perhaps through JavaScript or another scripting language? ...

Tips for organizing checkboxes in rows horizontally

My question is related to this issue I am trying to arrange my checkboxes in 4 columns horizontally <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> ...

What is the best way to only load a specific div from another webpage onto my own webpage without loading the entire page?

I am currently working with two webpages named internal.html and external.html Within internal.html, I have the following code snippet that loads external.html into a div with the id "result": <script src="http://ajax.googleapis.com/ajax/libs/jquer ...

The clash of interests between jQuery and Bootstrap

I'm facing a problem with conflicting jQuery and Bootstrap files in my header.php code. Whenever I include the jQuery file before the bootstrap.js file, it causes issues with the tabs on my website where clicking on them does not navigate me to the co ...

Unexpected issues have arisen with the $.ajax function, causing it

I am facing an issue where I can see the loader.gif but unable to view avaiable.png or not_avaiable.png in my PHP file. What could be causing this problem? $(document).ready(function()//When the dom is ready { $("#inputEmail").change(function() { ...

Generating views for individual models in a backbone collection

Currently, I am developing a small backbone.js application that simulates a library where CRUD operations can be performed. The core components of this application are the book model and the library collection (which stores books). var Book = Backbone.Mod ...

The concept of Puppeteer involves defining the browser and page in a synchronous manner

In the beginning of the Puppeteer tutorial, it is instructed to follow this code snippet: const puppeteer = require('puppeteer'); (async () => { await page.goto('https://example.com'); const browser = await puppeteer.launch ...

How can I rename a parameter while uploading a file with Vue2-Dropzone?

While using Vue2-Dropzone to upload files, the default parameter name is set to "file". However, I would like to customize it and change it to "upload". I attempted to modify this by utilizing the vdropzone-sending method. Unfortunately, this resulted in ...

Adding colors to your Vue3 and Vuetify3 theme: A Step-by-Step Guide

Currently, I am in the process of upgrading an old Vue2 app to Vue3 and I have a specific requirement to set up 3 global colors: red, green, and gray. In order to achieve this, I am implementing the following code snippet within my vuetify.js file: // Styl ...

Understanding the reasons behind 'undefined' res.body in Express

Why does the response body show as undefined in Express? How can I access the response body properly? Is something going wrong here? import {createProxyMiddleware} from 'http-proxy-middleware' import bodyParser from 'body-parser' impor ...

TypeScript and Next.js failing to properly verify function parameters/arguments

I'm currently tackling a project involving typescript & next.js, and I've run into an issue where function argument types aren't being checked as expected. Below is a snippet of code that illustrates the problem. Despite my expectation ...

What is the reason for all the buttons activating the same component instead of triggering separate components for each button?

I am facing an issue with my parent component that has 3 buttons and 3 children components. Each button is supposed to open a specific child component, but currently all the buttons are opening the same child component when clicked. The children components ...

What seems to be the issue with the data initialization function not functioning properly within this Vue component?

In my Vue 3 component, the script code is as follows: <script> /* eslint-disable */ export default { name: "BarExample", data: dataInitialisation, methods: { updateChart, } }; function dataInitialisation() { return { c ...

Struggling with transitioning from the Twitter search API to the status API

While using the search API to fetch tweets from a specific user, everything was working flawlessly except for the fact that it couldn't retrieve tweets when the username contained numbers. Based on a suggestion, I switched to using the status API que ...

retrieve a subdocument from an array in MongoDB

In my MongoDB database, I have the following data structure: {doc: { array_doc:[....//many documents]} } Currently, I am working with Mongoskin in MongoDB 2.2 with Node.js 0.8. var code_doc='HSKD41814541211'; var db = mongo.db(perm+"@127.0 ...

Obtain a segment of the string pathway

In this scenario, there is a file path provided below. Unlike the rest of the URL, the last part (referred to as video2.mp4) regularly changes. The language used for this project is either Javascript or Typescript. file:///data/user/0/com.sleep.app/files/ ...