Looping persists within the ng-repeat function

Currently, I am populating a list of items by using the ng-repeat directive. Within one of the fields, I pass the ID obtained from the ng-repeat to a function that retrieves information from another database table. The issue I am encountering is that when I execute this and log the result in the console, it seems to be stuck in a loop.

<ion-slide-box ng-repeat="q in questions.list track by $index">
      <ion-slide class="default box">
        <div class="amount">{{ getAmountQuestion(q.guid) }}</div>
        <div class="question"><h5>{{ q.fields.question }}</h5></div>
      </ion-slide>
</ion-slide-box>


$scope.getQuestionAmount = function(id) {
    QuestionsService.getAllVotesById(id).then(function (data) {
        console.log(data.count);
    });
};

Answer №1

Avoid placing an API service call within a watchExpression as it is not recommended due to the fact that the AngularJS framework will trigger that expression in every digest cycle.

As stated in the documentation:

The watchExpression is invoked on each call to $digest() and should return the value being watched. (The watchExpression must maintain its value when run multiple times with the same input, as it might be executed several times by $digest(). Therefore, the watchExpression should be idempotent).

-- AngularJS API Reference -- $watch

To optimize your code, move the API calls into the controller, store the results in a cache, and utilize something like

{{ cachedAmountQuestion[q.guid] }}
in your watch expression.

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

What is the best way to import all Vue3 components asynchronously?

I've been struggling to get the components to work properly. My goal is to store component names in an array, import them asynchronously, and then somehow assign them to app.component. I've spent about six hours on this and just can't seem t ...

Utilize JavaScript function to trigger form submission and button click event simultaneously

I am grappling with a function that needs to be triggered both when the form is submitted and a button is clicked. Despite attempting to achieve this through code, my limited knowledge of JavaScript and jQuery has me feeling overwhelmed. HTML <button ...

Error with setting innerHTML property of a null nested div

This issue arises when the element is referenced before the DOM has completely loaded. To combat this, I have ensured that the necessary script runs only after the window has finished loading. Interestingly, if the getElementById() call is for a standalon ...

How can I dynamically assign the formControlName to an <input> element within Angular?

I'm currently developing a component with the goal of streamlining and standardizing the appearance and functionality of our forms. The code snippet below illustrates the structure: Sample Implementation ... <my-form-input labelKey = "email" cont ...

The authentication strategy "github" is unrecognized

I am encountering an issue with online authentication on GitHub. Even after registering the new app on GitHub, the application continues to fail to redirect to OAuth. I have written the following code and am receiving an error message stating: Error: Unkn ...

Avoid constantly destroying the Bootstrap Popover

I am facing a challenge with retrieving data from two checkbox inputs inside a popover. The issue arises because the popover appears in the DOM when I click a button, but is removed when I click it again. It seems that the problem lies in the fact that Jav ...

Error message in node.js indicating that the maximum call stack size has been

Exploring Node.js: Understanding Recursive Emission var events = require('events'),timers = require('timers'); var EventEmitter = require('events').EventEmitter, util = require('util'); //class initiation var ...

Adding a div element with a background behind a text element using Jquery

Is there a way to position an absolute div behind text or images while staying in front of background images? I have content with background images behind the text, so setting the z-index of the absolute div to -1 won't work. Any suggestions on how to ...

"Enhance your website with a dynamic carousel feature using Twitter Bootstrap's JavaScript

After researching various examples, I noticed that most of them only display one Item at a time. I want to have multiple active items displayed using thumbnails, but the examples I found show that the Item itself contains multiple thumbnails inside of it. ...

What is the method for retrieving this data using Javascript?

I received this JSON-encoded data: { "error": { "msg":"Concurrent verifications to the same number are not allowed", "code":10 } } and I tried to access the 'msg' value using JavaScript as follows: $("#buttonPhoneSubmit ...

Firebug version 2.0.1 has been triggered to break on previous breakpoints

Despite adding and removing breakpoints, Firebug continues to stop at the old breakpoints upon refreshing the page. I attempted solutions such as resetting all Firebug options and deleting the breakpoints.json file, but they have not resolved the issue. ...

Resetting the Angular provider configuration whenever the service is injected into a different location

Trying to wrap my head around a rather complex issue here. I have a service set up as a provider in order to configure it. Initially, this service has an empty array of APIs which can be dynamically added to by various configuration blocks. When adding API ...

Error returned when making an AngularJS call to a Java Restful Webservice

My current project involves a restful webservice that is responsible for returning a list of users. This webservice is being called using AngularJS framework. Below is the code snippet for my Restful Webservice: package webservice; import java.sql.Connect ...

Is there a way to retrieve the central anchor point position (x, y) of the user's selection in relation to the document or window?

Is there a way to retrieve the center anchor point position (x, y) of the user's selection relative to the document or window? I have tried using window.getSelection() to get selected nodes, but I am unsure how to obtain their position: See an examp ...

Encountering an Uncaught Error: MyModule type lacks the 'ɵmod' property

I am currently working on developing a custom module to store all my UI components. It is essential that this module is compatible with Angular 10 and above. Here is the package.json file for my library: { "name": "myLibModule", &qu ...

Converting a 3D Position to its Corresponding 2D Screen Position in Three.js

I'm trying to figure out how to calculate the screen position (x,y) of a 3D object with the coordinates (x, y, z). I've researched and found one solution that involves finding the projection matrix and multiplying the 3D position by it to project ...

Unable to remove click event from nested <li> element

I have a function that enables the expansion and collapse of an unordered list by clicking on the list item. However, the issue arises when the lowest level LI contains a table with a checkbox, as clicking on the table triggers the display of the parent li ...

Node is currently posing a challenge for the installation of packages

I am currently facing an issue while setting up my raspberry pi 3. I am attempting to install and execute a node code, but I encountered a problem during the installation of packages using npm. After trying multiple times with different versions of node ( ...

eliminate a mesh from the view following a mouse hover event triggered by a raycaster

            When loading a gltf model, I want to make sure that a mesh is only displayed when the object is hovered over. I have successfully managed to change its material color using INTERSECTED.material.color.setHex(radioHoverColor); and reset it ...

Having difficulty sending variables to onreadystatechange

Here is the latest version of the source code: var xhttp = new XMLHttpRequest(); function passVars(var1, var2, var3) { if (var1.readyState == 4) { if (var1.status == 200) { var data = var1.responseText; if (data) { playSuccess ...