Passing variables into a looped asynchronous callback in AngularJS

Question

Passing variables into a looped asynchronous callback in AngularJS

I have a function that iterates through an undetermined number of items and performs asynchronous calls on each to retrieve additional data (specifically, the content of HTML template files). The callback also includes some validation checks. The end result should be chainable. $q is injected beforehand, and this code is a part of a factory.

function searchHelpTopics(topics, searchPhrase) {
    if (topics == null || topics.length == 0) return "No search results";
    var results = [];
    var promises = [];
    for (var i = 0; i < topics.length; i++) {
        var templateURL = topics[i].URL;
        var topic = topics[i];
        if (topics[i].HelpTopicId != "Search") {
            var promise = $templateRequest(templateURL).then(function (template) {
                var text = HTMLToText(template, true);
                // perform the search
                if (text.indexOf(searchPhrase) > -1) {
                    if (text.length > 50) text = text.substring(0, 50);
                    var result = {};
                    result.title = topic.Title;
                    result.excerpt = text;
                    result.helpID = topic.HelpTopicID;
                    results.push(result);
                }
            });
            promises.push(promise);
        }
    }
    return $q.all(promises).then(function () {
        return results;
    })

The issue here is that the for loop does not wait for the callbacks to finish, causing the callback to operate on the incorrect topic object. I need a method to pass the correct topic into the callback during each iteration.

javascript angularjs angular-promise

Answer 1

Answer №1

One way to enhance your JavaScript code is by utilizing function scope instead of a 'for' loop, which is typically more efficient.

You can achieve this by leveraging built-in JS methods like forEach (available in most browsers from version 1.6 onwards) or using functional style libraries such as underscore.js or lodash.js.

Alternatively, a better approach would be to make use of Array.map and Array.filter functions as shown below:

function processTemplate(topic, template) {
  var text = HTMLToText(template, true);
  // perform search
  if (text.indexOf(searchPhrase) < 0) {
    return;
  }
  if (text.length > 50) {
    text = text.substring(0, 50);
  }
  return {
    title: topic.Title,
    excerpt: text,
    helpID: topic.HelpTopicID
  };
}

function searchHelpTopics(topics, searchPhrase) {
  if (!topics || topics.length === 0) {
    return "No search results";
  }
  var promises = topics
    .filter(function(topic) { return topic.HelpTopicId !== "Search"; })
    .map(function(topic) {
      return $templateRequest(topic.URL).then(processTemplate);
    });
  return $q.all(promises)
    .then(function (results) {
      return results.filter(function (result) {
        return result; // filters out 'undefined'
      });
    });
}

Answer 2

One way to enhance your JavaScript code is by utilizing function scope instead of a 'for' loop, which is typically more efficient.

You can achieve this by leveraging built-in JS methods like forEach (available in most browsers from version 1.6 onwards) or using functional style libraries such as underscore.js or lodash.js.

Alternatively, a better approach would be to make use of Array.map and Array.filter functions as shown below:

function processTemplate(topic, template) {
  var text = HTMLToText(template, true);
  // perform search
  if (text.indexOf(searchPhrase) < 0) {
    return;
  }
  if (text.length > 50) {
    text = text.substring(0, 50);
  }
  return {
    title: topic.Title,
    excerpt: text,
    helpID: topic.HelpTopicID
  };
}

function searchHelpTopics(topics, searchPhrase) {
  if (!topics || topics.length === 0) {
    return "No search results";
  }
  var promises = topics
    .filter(function(topic) { return topic.HelpTopicId !== "Search"; })
    .map(function(topic) {
      return $templateRequest(topic.URL).then(processTemplate);
    });
  return $q.all(promises)
    .then(function (results) {
      return results.filter(function (result) {
        return result; // filters out 'undefined'
      });
    });
}

Answer 3

Answer №2

This solution serves as a guide to understanding the functionality, although it is not a comprehensive one.

somefactory.getHelpTopics().then(function (topics) {
    somefactory.searchHelpTopics(topics, searchText).then(function (searchResults) {
        vm.searchResults = searchResults;
        vm.helpID = "Search";
    });
});

--- Explanation of factory functions ----
function searchHelpTopics(topics, searchPhrase) {
    if (!topics || topics.length === 0) return "No search results";
    var promises = topics
        .filter(function (topic) { return topic.HelpTopicId !== "Search"; })
        .map(function (topic) {
            return $templateRequest(topic.URL).then(function (template) {
                return searchHelpTemplate(template, topic, searchPhrase);
            });
        });
    return $q.all(promises).then(function (results) {
        return results.filter(function (result) {
            return result; // filters out 'undefined'
        });
    });
}
function searchHelpTemplate(template, topic, searchPhrase) {
    var text = HTMLToText(template, true);
    // perform the search
    if (text.indexOf(searchPhrase) < 0 && topic.Title.indexOf(searchPhrase) < 0) {
        return;
    }
    if (text.length > 50) {
        text = text.substring(0, 50);
    }
    return {
        title: topic.Title,
        excerpt: text,
        helpID: topic.HelpTopicId
    };
}

Answer 4

This solution serves as a guide to understanding the functionality, although it is not a comprehensive one.

somefactory.getHelpTopics().then(function (topics) {
    somefactory.searchHelpTopics(topics, searchText).then(function (searchResults) {
        vm.searchResults = searchResults;
        vm.helpID = "Search";
    });
});

--- Explanation of factory functions ----
function searchHelpTopics(topics, searchPhrase) {
    if (!topics || topics.length === 0) return "No search results";
    var promises = topics
        .filter(function (topic) { return topic.HelpTopicId !== "Search"; })
        .map(function (topic) {
            return $templateRequest(topic.URL).then(function (template) {
                return searchHelpTemplate(template, topic, searchPhrase);
            });
        });
    return $q.all(promises).then(function (results) {
        return results.filter(function (result) {
            return result; // filters out 'undefined'
        });
    });
}
function searchHelpTemplate(template, topic, searchPhrase) {
    var text = HTMLToText(template, true);
    // perform the search
    if (text.indexOf(searchPhrase) < 0 && topic.Title.indexOf(searchPhrase) < 0) {
        return;
    }
    if (text.length > 50) {
        text = text.substring(0, 50);
    }
    return {
        title: topic.Title,
        excerpt: text,
        helpID: topic.HelpTopicId
    };
}

Passing variables into a looped asynchronous callback in AngularJS

Answer №1

Answer №2

Similar questions

Unable to decompress using gunzip and serverless-http due to incorrect header check error, yet functions properly with a standard Node.js Express server

Concealing a navigation tab with Angular4 in Typescript: A tutorial

Are there any available resources for comparing the performance of JavaScript libraries?

What is the best way to execute useEffect in React Router?

Updating the count property of an object using setState in React

React Component UseEffect does not refresh when there is a change in prop

unable to decipher a JSON file obtained from Instagram

Adjust div size when the window size changes

Error: The function props.addToCart is not accessible

What is the best way to transfer a variable from a form to a PHP page using an AJAX script?

What is a method to categorize an array of objects by the identical value of a specified key field without relying on any third-party libraries?

Picking out specific SharePoint components using jQuery

Engagement in the assortment of assurances within mongoose

Sharing edited images from various devices while preserving their original high resolution

What is the proper way to utilize $apply and $watch in the Angularjs 1.4.10 Directive Structure?

"An ActionResult is received as null when the model is passed as an

ReactJs: difficulty in resetting input field to empty string

Put identical objects into several arrays at the same time

Steps to finish (refresh) a mongoDB record

Deactivate multiple input fields by utilizing various radio buttons