Is invoking a function from a view in AngularJS detrimental to performance?

I've observed that whenever I invoke functions from my Angular view, the functions are executed multiple times, even when the data remains unchanged.

For instance: 

<div ng-repeat="day in days_array">
   {{getWeek(day)}}
</div>

As a result, the getWeek() function is called for every item in days_array almost each time there is any modification made anywhere in the application. This led me to wonder if filters could potentially resolve this issue? Are filters only triggered when the days_array is modified, thereby enhancing performance?

javascriptangularjs

Answer №1

Why not simplify the optimization process by mapping the week once and using it directly in HTML? In some instances, you may be loading days as shown below:

$scope.loadDays = function () {
    service.getDays().then(function (days_array) {
        $scope.days_array = days_array.
    });
}

Alternatively, you might have it hard-coded like this:

$scope.days_array = [{index: 0, code: MONDAY}...];

You can easily enhance this by adding a week property:

$scope.days_array = $scope.days_array.map(function (day) {
    day.week = getWeek(day);
    return day;
});

This way, you can use it in your HTML like so:

<div ng-repeat="day in days_array">
   {{day.week}}
</div>

And it will perform just like regular Angular binding. Furthermore, for further optimization, if the week never changes, you can utilize one-time binding:

<div ng-repeat="day in days_array">
   {{::day.week}}
</div>

Angular will no longer check this variable repeatedly. And taking another step - if the days_array is set once and remains unchanged, you can eliminate the list entirely:

<div ng-repeat="day in ::days_array">
   {{::day.week}}
</div>

Answer №2

It's definitely experiencing poor performance. Implementing filters could improve it. It would be beneficial to have a way of recognizing when something new is added.

Here is a link to some performance tips for angularjs loops that I found helpful:

I hope you find it useful.

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

Leverage Dropzone functionality in combination with node.js

Just starting out with node.js and experimenting with file uploads using drag and drop. Initially, I created a basic uploader without drag and drop functionality: var http = require('http'); var formidable = require('formidable'); ...

javascriptnode.jsdropzone.jsformidable

Is window.getComputedStyle not functioning as anticipated?

Here is a function I created to determine the width and height of a text: function size_calculation(word,fontSize) { const div = document.body.appendChild(document.createElement('div')); div.textContent = word; div.style.cssText = ` fo ...

javascripthtmlcss

Display: Show view once forEach loop finishes execution

I'm facing an issue with my update query execution within a loop. Is there a way to trigger the rendering of a view once the forEach loop completes all its iterations? Here's the snippet of code: conn.query(`SELECT Id, ${sfColumn} from Lead`, ...

javascriptnode.jsexpress

Screen content of a post request in Node.js

Can this code in node.js + express be simplified? // Code snippet for registering a new participant app.post('/api/participant', function (req, res, next) { var data = req.body; // Ensure only specific fields are uploaded var parti ...

javascriptnode.jsapisecurityexpress

Is there a way to connect either of two distinct values in Angular?

Looking to assign the data with two possible values, depending on its existence. For instance, if I have a collection of TVs and I want to save the "name" value of myTVs[0] and myTVs[1]. For example: var myTVs = [ { "JapaneseTV": { ...

javascriptangularjs

Struggling to connect to an express route?

I'm currently working on a MERN project and I'm encountering a small issue. When trying to make a POST request to a specific route, Express throws a 404 error and tells me that it can't find the desired route. However, everything works perfe ...

javascriptreactjsexpress

Switch between various div elements

Looking for a way to toggle between different divs? Here's the scenario: You have a sidebar with a set of buttons. Upon entering the page, you only want the div containing the button group to be visible. However, when a specific button (e.g. Info) is ...

javascripthtmljquerycsstoggle

Dealing with errors when making HTTP requests in AngularJS using the `then`

What is the best way to tackle an HTTP error like 500 when utilizing AngularJS "http get then" construct (promises)? $http.get(url).then( function(response) { console.log('get',response) } ) The issue here is that for any non-20 ...

javascriptangularjspromiseangular-promiseangular-http

Send the parameter to the compile method within the directive

I am currently working on creating a generic field and utilizing a directive for it. In my HTML code, I have defined the following: <div def-field="name"></div> <div def-field="surname"></div> <div def-field="children"></d ...

javascriptangularjs

Deploying NextJS: Error in type causes fetch-routing malfunction

Encountering a mysterious and funky NextJS 13.4 Error that has me stumped. Here's a summary of what I've observed: The issue only pops up after running npm run build & npm run start, not during npm run dev The problem occurs both locally and ...

javascriptreactjswebpacknext.js

What is the best approach for addressing null values within my sorting function?

I created a React table with sortable headers for ascending and descending values. It works by converting string values to numbers for sorting. However, my numeric(x) function encounters an issue when it comes across a null value in my dataset. This is th ...

javascriptjsonreactjs

Utilize date-fns to style your dates

Struggling to properly format a date using the date-fns library. The example date I'm trying to work with is 2021-09-20T12:12:36.166584+02:00. What am I doing wrong and what is the correct approach? Here's the code snippet I have so far: import ...

javascriptreactjsdate-fns

What is the best way to eliminate items from an array in a side-scrolling video game?

In my gaming project, I am creating a unique experience where the player needs to collect all the words from a given array. Currently, I am utilizing the shift() method to eliminate elements, as demonstrated in the code snippet below: if ( bX + bird.width ...

javascriptarraysloopsmethods

Sending dynamic internationalization resources from Node.js to Jade templates

Looking for a way to show a custom error page to the user in case of an error, but it needs to be internationalized (i18n-ed). Solution: My idea is to validate in node -> if not accepted -> res.render('error', {message: errorMessageNameToo ...

javascriptnode.jspugi18next

Predictive text suggestions based on the name of an object

I am attempting to configure a typeahead feature using AngularJS & UI Bootstrap in the following manner: .html <input type="text" ng-model="selectedStuff" typeahead="stuff.name for stuff in stuffs | filter:$viewValue"/> <span>{{selectedS ...

angularjsbootstrap-typeaheadangular-ui-bootstrap

Attempting to save data to an external JSON file by utilizing fs and express libraries

I've encountered a challenge while attempting to serialize an object into JSON. Despite my best efforts, I keep encountering an error that has proven to be quite stubborn... Below is the code snippet that's causing the issue: APP.post('/api ...

javascriptnode.jsjsonexpressnode.js-fs

Error occurs in console when using .getJSON with undefined JSON, but does not happen when using embedded data

Can someone help me understand why I'm getting an 'undefined' response when I use console.log(tooltipValues), but there's no issue with console.log(tooltipJSON). I've noticed that when I embed the data directly in my JS code, ever ...

javascriptjson

Mix up the colors randomly

After searching extensively, I have been unable to find exactly what I am looking for. The closest matches only cover a portion of my needs which include: I am seeking a randomly selected color scheme that I have created but not yet implemented in code. T ...

javascripthtmlcss

Sharing JavaScript code between Maven modules can be achieved by following these steps

My Maven project has a unique structure that includes: "Base" module -- containing shared Java files -- should also include shared JavaScript files Module 1 -- using shared Java files as a Maven dependency -- should utilize shared JavaScript files throug ...

javascriptmavennpmwebpack

What is the best way to add <li> to every element in an array?

I had a tough day today trying to figure out my code. My English isn't the best, so explaining my issue is hard. I decided to illustrate my problem in HTML and specify the kind of styling I need to achieve with JS. I also included an example using the ...

javascriptarraysjsonhtml-lists