The method is triggered multiple times

Why does calling a method in my controller result in the object.name being logged multiple times?

(function(){

    var app = angular.module('portfolio', ['ngRoute' ]);

    app.controller('ReferenceController', function(){

        this.product = references;
        this.arrayLength = this.product.length;

        // @TODO
        this.getReferences = function(){ 

            for(var i = 0; i < this.arrayLength; i++){
                console.log(this.product[i].name);
            }

             return false;

        };

    });

    var references = [

        {
            name: "ThisIsName",
            imgUrl: "This Is Image URL",
            pageUrl: "This Is Page URL",
            tags: [
                {tag: "web"}
            ]
        }

    ];

})();

The method is called as shown below

<div ng-controller='ReferenceController as reference'>
      {{reference.getReferences()}}
</div>

Answer №1

Angular's two-way data-binding is the root cause of this issue, as it constantly goes through the $digest loop to check for updates. To prevent multiple function calls, it is recommended to execute the function within your controller.

For further insights on the digest loop, check out this informative resource.

Answer №2

It seems like you're looking for specific information, however,

  when the code snippet runs, it loops through each item in the array and logs the name to the console.

This process repeats for each item in the array, resulting in multiple console logs for each value present.

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

Angular update row and save data to an array

When comparing the data of an edited row with the row just below it, I encounter a specific scenario. In a table containing 5 rows, as I edit records from top to bottom using the provided code snippet, I am able to store the values in an array. The most re ...

What could be causing the excessive number of entries in my mapping results?

I am in need of mapping an array consisting of dates. Each date within this array is associated with a group of dates (formatted as an array). For instance: The format array looks like this: let format = [3, 3, 1, 5, 4, 4, 3, 5, 13, 10, 3, 5, 5, 2, 2, 10] ...

Learn how to implement Redux login to display the first letter of a user's name and their login name simultaneously

I am implementing a Redux login feature and after successful login, I want to display the first letter of the user's name or email in a span element within the header section. Can anyone provide a solution for this? Below is my Redux login code snippe ...

Testing the mongoose.connect callback method in Jest: A step-by-step guide

Currently working on a new Express application and utilizing Jest as the testing framework. All sections of code have been successfully covered, except for the callback of the mongoose.connect method: https://i.sstatic.net/SNrep.png I attempted to spy o ...

Dealing with complications in the Rails asset pipeline management

I am working on a webpage that requires real-time data to be displayed. Therefore, it necessitates continuous ajax communication post page load. similar to this, jQuery -> setInterval -> $.ajax url: "some url" success: (data, te ...

Clicking to enter fullscreen mode on a website will result in the Fullscreen API automatically closing

For my current project, I am creating an offline website and would like it to display in full screen when opened. I have been using the Fullscreen API, but it exits fullscreen mode when a user navigates to another page. After researching the issue, it seem ...

"Automate the process of clicking on a specific part of a div element

I'm trying to extract data from this specific website: I've written the code to reach the simulation page, but I encounter an issue with a particular link. This dynamic link is causing me trouble when trying to access it. Clicking on that link ...

Issue with $scope.gridOptions.api.setRowData function not being effective

I am currently working with ag-grid and facing an issue where I am unable to display data from a JSON file on the UI using the $scope.gridOptions.api.setRowData method. Currently, only the headers are being displayed but not the data itself. Below is the ...

Want to achieve success with your AJAX calls in JavaScript? Consider using $.get

As I clean up my JavaScript code, I am looking to switch from using $.ajax to $.get with a success function. function getresults(){ var reqid = getUrlVars()["id"]; console.log(reqid); $.ajax({ type: "POST", url: "/api/ser/id/", ...

Why does my Angular service throw an error stating "undefined is not a function" when passing my function as an argument?

I am currently working on implementing factory and two constructor patterns in Angular. My goal is to convert the factory into an Angular service. Below is a simplified version of the code I am working with: function processFactory () { // some code ...

"Modifying Code Aesthetics in WebStorm/IDEA: A Step-by-

Here is the code style I am currently using in my JavaScript project: var obj = { a: 1 , b: 2 , c: 3 } var arr = [ 'a1' , 'a2' , 'a3' ] const w = 1 , w2 = 2 , w3 = 3 The team claims they are following npm's co ...

The functionality of AngularJS ngdialog appears to be malfunctioning

I am facing a problem with my application that uses AngularJS. When I try to use ngDialog, the page ends up showing a blank page instead of loading properly. Here is the code snippet I have used: angular.module('pswApp', ['ngRoute', & ...

This API is no longer compatible with India's payment system, so you won't be able to process payments using Next.js, Strapi, or

I am currently developing a website using "next js" as the frontend and "Strapi" as the backend for a simple ecommerce project. The payment gateway being utilized is "Stripe". I have implemented the checkout code in both the frontend and backend, and every ...

Using TypeScript for Immutable.js Record.set Type Validation

Currently, I'm utilizing Immutable.js alongside TypeScript for the development of a Redux application. In essence, the structure of my State object is as follows: const defaultState = { booleanValue: true, numberValue: 0, } const StateRecord = ...

What is the best way to update specific values in a react multiselect component?

Within my modal, I have a form where I can edit my model. One of the fields in this form is a multi-select tag field called "tags", which is an array of objects consisting of labels and values as illustrated below. To populate this tag field, I have a dum ...

What is causing fs.readFileSync to not recognize my json document?

So, I've been working on creating a Discord bot that can extract specific data from my JSON file. Here is the structure of my project: Project | +-- data/ | | | +-- compSciCourses.json | +-- src/ | | | +-- search.js | +-- bot.js | +-- t ...

Browsing through different backdrop visuals

I realize this question has been brought up numerous times before, but I urge you to take a moment and read through it. Currently, I am looking to add more interactivity to my HTML page. My goal is to change the background image every five seconds with a ...

Guide on waiting for an asynchronous function in the constructor in JavaScript

In the process of creating a JS class, I encounter a situation where I need to call wasmFunc in the constructor and store its output in this.val. However, since wasmFunc comes from a WebAssembly file, it is necessary to execute an async function called loa ...

Guide on how to trigger the opening of a side panel with a button click in Vue.js

Embarking on my first Vue app development journey, I find myself in need of guidance on how to trigger the opening of a panel by clicking a button within the header. Starting off with a simple HTML template, my goal is to add some interactivity upon click ...

No data provided in nested parameters for Ajax post request

I am attempting to send an Ajax request to my rails controller using Ajax. $.ajax({ url: '/vulnerabilities/export', type: 'GET', processData: false, data: {export: {ids: this.refs.table.state.selectedRowKeys }} }); When there ...