AngularJS: Iterating through data and calling a callback function

Question

AngularJS: Iterating through data and calling a callback function

When I attempt to fetch multiple JSON files in a loop, I encounter an issue where the callback function only retains the last key of the loop for each result.

Here is how it is called:

deckbuilderApp.factory('DeckFactory', ['$http', '$rootScope', 'DataFactory', function($http, $rootScope, DataFactory) {

  var cardColors = {"white":{}, "blue":{}, "black":{}, "red":{}, "green":{}, "colorless":{}};
  var cardColorsCheck = {"white":true, "blue":true, "black":true, "red":true, "green":true, "colorless":true};

  return {
    fetchCardColors: function() {
      for (key in cardColors) {
        if (cardColors.hasOwnProperty(key)) {
          DataFactory.cardColors(key, function(cardIds) {
            console.log("GOT COLORS FOR " + key);
            cardColors[key] = cardIds;
          });
        }
      }
    }
  }
}

This is how it is requested:

deckbuilderApp.factory('DataFactory', function($http) {
  return {
    cardColors: function(color, callback) {
      $http({
        method: 'GET',
        url: 'js/cardColors/' + color + '.json'
      }).success(callback)
    }
  }
}

Although the data is successfully fetched, the log always displays "GOT COLORS FOR colorless" as it processes the last key in the loop.

javascript angularjs

Answer 1

Answer №1

This code snippet demonstrates the concept of asynchronous execution in JavaScript:

for (var i = 0; i < 100; i++) {
    setTimeout(function () {
        console.log(i);
    }, 0)
}

The result will be printing number 100 to the console 100 times, due to the async nature of the for loop.

To avoid this behavior, you can use the let keyword or create a closure:

for (var i = 0; i < 100; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(i);
        }, 0)
    })(i)
}

In modern JavaScript (ES6), you can simply use the let keyword to achieve the same result:

for (let i = 0; i < 100; i++) {
    setTimeout(function () {
        console.log(i);
    }, 0)
}

Answer 2

This code snippet demonstrates the concept of asynchronous execution in JavaScript:

for (var i = 0; i < 100; i++) {
    setTimeout(function () {
        console.log(i);
    }, 0)
}

The result will be printing number 100 to the console 100 times, due to the async nature of the for loop.

To avoid this behavior, you can use the let keyword or create a closure:

for (var i = 0; i < 100; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(i);
        }, 0)
    })(i)
}

In modern JavaScript (ES6), you can simply use the let keyword to achieve the same result:

for (let i = 0; i < 100; i++) {
    setTimeout(function () {
        console.log(i);
    }, 0)
}

AngularJS: Iterating through data and calling a callback function

Answer №1

Similar questions

Encountering Null values in form collection during submission via ajax in ASP.Net MVC. What could be the underlying problem?

Issue with binding classes dynamically in vue with svg elements

Issue with resetting JavaScript input value in onblur event

Exploring the isolated scopes of AngularJS directives

Checkbox column within GridView allows users to select multiple items at once. To ensure only one item is selected at a

Coloring vertices in a Three.js geometry: A guide to assigning vibrant hues

Unlocking the Potential of External Values in Angular Beyond http.then

What is the best way to incorporate and organize the templateHyper folder within an established web project directory?

The issue arises with Datatables not functioning properly when attempting to load a specific page using

Reformatting function transforms the structure of an array containing objects

error": "Unable to access undefined properties (reading 'SecretString')

Trouble with MailChimp AJAX API not initializing the API call

Where should data processing be conducted: in the service or controller layer?

Is it feasible to activate an action on a click of a Vimeo video?

Having trouble with $location.path() not working when trying to redirect from a .then in a factory method

Using JQuery within Angular 4 is a valuable tool for enhancing the functionality

Retrieve an item from a mapped array

Display a dropdown menu depending on the chosen item

How can I configure the domain in a Localstorage offline JS app to access local storage from multiple HTML files?

Enhanced jQuery implementation for hiding elements