Exploring the contrasts in values within the ng-repeat directive of AngularJS

I am currently working with a JSON object that contains information about various clients, including the payments made over different date ranges within each month. My goal is to loop through this list of customers and display a table for each customer, highlighting any variations in payments between periods. However, I am facing difficulty comparing the payment made at the end of one month with the payment made at the beginning of the next month.

The JSON data from the legacy system looks like this:

{  
 "customers":[  
    {  
     "name":"John",
     "months":{  
        "1":{  
           "details":[  
              {  
                 "startDate":1483225200000,
                 "endDate":1483830000000,
                 "payment":250
              },
              {  
                 "startDate":1483916400000,
                 "endDate":1485817200000,
                 "payment":350
              }
           ]
        },
        ...
     }
  },
  ...
 ]
}

Below is my HTML code where I use ng-repeat to iterate over the data and apply the "highlight" class when payments vary:

<table ng-repeat="customer in customersList">
<tbody ng-repeat="month in customer.months">
    <tr ng-repeat="detail in customer.details track by $index">
        <td data-ng-class="{'highlight' : month.details[$index-1].payment != month.details[$index].payment && $index > 0}">{{::detail.payment}}</td>
        <td data-ng-class="{'highlight' : month.details[$index-1].payment != month.details[$index].payment && $index > 0}">{{::detail.payment | currency}}</td>
    </tr>
</tbody>
</table>

Although I attempted to use $parent to access previous month data for comparison, I encountered difficulties in achieving the desired outcome. I would appreciate any insights on what might be causing this issue and whether it is feasible to compare payments across months in this manner.

Answer №1

The reason why your current implementation is not working is because the $index refers to the index in month.details instead of customer.months.

This is where the use of the ng-init directive can be helpful.

If I understand correctly, you are trying to compare payments. You may want to try something like this:

<table ng-repeat="customer in customersList">
<tbody ng-repeat="month in customer.months">
    <tr ng-init="monthIndex = $index" ng-repeat="detail in customer.details track by $index">
        <td data-ng-class="{'highlight' : customer.months[monthIndex - 1].details[$index].payment != month.details[$index].payment && monthIndex > 0}">
            {{::detail.payment}} {{customers.months[monthIndex - 1].details[$index] != month.details[$index].payment && $index > 0}}
        </td>
        <td data-ng-class="{'highlight' : customer.months[monthIndex - 1].details[$index-1].payment != month.details[$index].payment && monthIndex > 0}">
            {{::detail.payment | currency}} {{customers.months[monthIndex - 1].details[$index].payment}}
        </td>
    </tr>
</tbody>
</table>

By setting monthIndex as the index of the current month before entering the month.details loop, you can refer back to the previous month within the month.details loop using monthIndex - 1.

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

Boosting your website with a slick Bootstrap 4 responsive menu that easily accommodates additional

I have incorporated a main menu in my website using the Bootstrap 4 navbar. However, I also have an additional div (.social-navbar) containing some extra menu items that I want to RELOCATE and INSERT into the Bootstrap menu only on mobile devices. Essentia ...

Tips for transferring information between two distinct ports within a single application

I have been utilizing the expressjs library for my project. It functions as a server on localhost:8000 and I am displaying static pages through it. However, my application operates on localhost:4200. Despite attempting to share the same cookie or localSt ...

The user score tracking database, cataloging personal scoring history

In my database, I have a table called User. Each user in this table has a field named score. I am looking to display how the score of each user has evolved over time. My dilemma is whether to store this score separately. Should I create a new database t ...

It seems that the JavaScript object is producing varied values in distinct locations despite no alterations made in between

I've encountered a puzzling issue where a variable is returning different values within a function, despite no modifications being made to it. This problem arises in a form component created using Vue.js (v2) that triggers a Vuex action. While I beli ...

Error: The document has not been defined - experimenting with vitest

I'm currently working on a Vite project using the React framework. I have written some test cases for my app using Vitest, but when I run the tests, I encounter the following error: FAIL tests/Reservations.test.jsx > Reservations Component > d ...

React- The Autocomplete/Textfield component is not displaying properly because it has exceeded the maximum update depth limit

My autocomplete field is not displaying on the page even though I wrapped it with react-hook-form for form control. When I check the console, I see this error: index.js:1 Warning: Maximum update depth exceeded. This can happen when a component calls setSt ...

The crash during compilation is triggered by the presence of react-table/react-table.css in the code

My code and tests are functioning properly, but I am facing a challenge with my react-table file. The react-table.js API specifies that in order to use their CSS file, I need to include import "react-table/react-table.css"; in my react-table.js file. Howev ...

Determining the client web app version in HTTP requests

We frequently update our single page application, but sometimes an older version with a bug can still be in use. It would be helpful if the client could include a version identifier with requests to let us know which code base is being used. Are there est ...

Experiencing the 'invalid_form_data' error while attempting to upload a file to the Slack API via the files.upload method in Angular 8

I am currently working on a project that involves collecting form data, including a file upload. I am trying to implement a feature where the uploaded file is automatically sent to a Slack channel upon submission of the form. Despite following the guidance ...

Zoom in and Zoom out functions in ngPdf with centered view

I have incorporated the pdf canvas to showcase PDFs on my AngularJS/Bootstrap application, and I must say, the preview feature is working exceptionally well. However, one thing that I would like to achieve is centering either my modal or the canvas itself ...

How can I test for equality with an array item using v-if in Vue.js?

Currently, I am facing a challenge in my Vue.js project where I need to determine if a number is equal to an element within an array. Here is the code snippet that I am working with: <div v-if="someValue != arrayElement"> // </div> I am st ...

Displaying Props Information in a Modal Window using React

Currently venturing into the realm of React JS, where I am in the process of developing a sample eCommerce application for real-time use. However, I have hit a roadblock. In my Products List, there is a Buy button for each product. When clicking on this b ...

You can use AJAX, JQuery, or JavaScript in PHP to upload a total of 7 files by utilizing 7 individual file input

My client has a unique request - they want to be able to upload a file in PHP without using the traditional <form> tag or a submit button. While I am familiar with file uploads in PHP, I am unsure of how to achieve this without utilizing the <for ...

Strategies for transferring retrieved data to the getServerSideProps function

I am currently utilizing the Context API to retrieve data and then pass that data to the getServerSideProps function, but encountering the following error: The React Hook "useContext" is being called in a function "getServerSideProps" that is neither a Re ...

Is it feasible to develop a Grafana datasource plugin that does not rely on an external backend system?

I am in the process of developing a Grafana datasource plugin that operates independently without relying on an external backend. My plugin is based on the simple-json datasource plugin available at: https://github.com/grafana/simple-json-datasource In a ...

Best practice for translating a JSON file with extraneous data into a Java object

My Java application receives a large JSON string with nested data from a REST API response. I am using Jackson to map this JSON string to an object, but I only need about 50% of the information provided. How should I model the class that the JSON string wi ...

Problem with Jquery Ajax, failing to recognize option values

Hello everyone, please review the code snippet below... $.fn.myajax = function (options) { var defaults = { my_event: "", my_url: "", my_data: "", } var o = {}; var mydata = options.my_data; $.extend(o, default ...

The process of eliminating body padding in Nuxt.js

I'm considering building a website using Nuxt.js because I've heard it's both cool and user-friendly. While I do have some knowledge of vue.js, I'm stuck on a particular issue: How can I remove the padding from the body? I understand ...

The Ionic project compilation was unsuccessful

Issue: This module is defined using 'export =', and can only be utilized with a default import if the 'allowSyntheticDefaultImports' flag is enabled. Error found in the file: 1 import FormData from "form-data"; ~~~~~~~~ node ...

Is it possible for me to declare attributes using a function object in a single statement?

Given an object obj, the following two-line statements can be defined: var obj ={} //this is an object obj.isShiny = function () { console.log(this); return "you bet1"; }; These two lines can be combined into a one-line statement ...