Exploring the correct URL by iterating through http GET requests in AngularJS

Currently, I am working on a project that involves making an HTTP request using Angular to approximately 1500 URLs in search of JSON data that matches a specific condition (only one URL will match). My current implementation sometimes works, but it seems non-deterministic, possibly due to the asynchronous nature of the requests or maybe there is a bug? As I am new to Angular, I am open to completely changing the code if needed!

this.matchingurl;
this.data;
this.findUrl = function(condition) {
  var that = this;
  for (var i = 0; i <= ; i++) {
    // This loop iterates through the list of URLs
    for (var i = 0; i < urlList.length; i++) {
      for (var j = 0; j < urlList[i]['list'].length; j++) {
        this.url = 'http://' + urlList[i]['list'][j] + restofurl;
        var tempUrl = urlList[i]['list'][j];
        $http.get(this.url).success(function(data) {
          if (condition is met in data) {
            that.matchingurl = tempUrl;
            return;
          }
        })
        .error(function(data){
          // Error handling
        });
      }
    }
  }
}

TLDR: The matchingUrl variable does not behave as expected. It enters the "condition" loop but does not output the correct URL. It always returns the same URL for any sublist, whether right or wrong.

Answer №1

If you're looking to efficiently handle multiple URLs in AngularJS, I recommend utilizing the $q promise feature. You can either check one URL at a time sequentially (which might be slow) or retrieve all results simultaneously by making parallel requests. Below is a basic implementation of the latter approach:

this.findUrl = function(condition) {
    var urls = [], self = this, oUrl;   // store all the URLs
    urlList.forEach(function(list){
        list.forEach(function(url){
            oUrl.push(url);
            urls.push('http://' + url + restofurl);  // it's unclear where 'restofurl' comes from...
        });
    });

    $q.all(urls.map(function(url){
        return $http.get(url);  // converts each URL to a promise and maps them all
    })).then(function(datas){
        datas.some(function(data, i){
            if(data == condition){  // adjust as needed
                self.matchingurl = oUrl[i];
                return true;
            }
        })
    });
}

Edit:

You can also achieve the same result by checking one URL at a time:

this.findUrl = function(condition) {
    var urls = [], self = this, oUrl;   // store all the URLs
    urlList.forEach(function(list){
        list.forEach(function(url){
            oUrl.push(url);
            urls.push('http://' + url + restofurl);  // it's unclear where 'restofurl' comes from...
        });
    });

    function check(i){
        function fail(){    // move on to check the next URL in the array
            i++;
            if(i < urls.length)   return check(i);
            console.log('none of the URLs match');                
        }

        return http.get(urls[i]).then(function(data){
            if(data == condition){  // adjust as needed
                self.matchingurl = oUrl[i];
            } else{
                fail();
            }
        }).catch(fail);
    }
    check(0);   // initiate the chain
}

Answer №2

It's important to handle your variables correctly in order to avoid running into trouble with synchronous http calls. Below is a snippet that demonstrates how to achieve the same using synchronous http calls.

this.matchingurl;
this.data;
this.findUrl = function(condition, i, j) {
        var that = this;
        this.url = 'http://' + urlList[i]['list'][j] + restofurl;
        var tempUrl = urlList[i]['list'][j];
        $http.get(this.url).success(function(data) {
          if (condition is met in data) {
            that.matchingurl = tempUrl;
            return;
          }
          else{
            if(urlList[i]['list'].length > j + 1){
              j++;
            }
            else{
              if(urlList.length > i+1){
                i++;
                j=0;
              }
              else{
                return;
              }
            }
            this.findUrl(condition, i, j);
          }
        })
        .error(function(data){
          // error handling
        });
      }
    }
  }
}

this.findUrl(condition, 0, 0);

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

If the <option> "anyTableName" </option> is chosen, then display the column names of the selected table (PHP, MySQL)

Hey there, I'm a newbie on stackoverflow so feel free to correct me if I'm off base ;) Here's my current dilemma: I have a text.php file that contains 2 <select> elements. The first one allows me to choose a table (like "accounts", "c ...

Generate your API with the NODEJS Express application generator

The current functionality of the Express JS Express application generator allows for the generation of an initial App, also known as a Boilerplate, using the npx express-generator or express myapp commands depending on the version of Express. The default s ...

What strategies can I implement to stop Iframes from disrupting the browser's history when interacting with them?

In my particular situation, I utilize Iframes to display Grafana on my page, which showcases beautiful and user-friendly graphs. After examining, I noticed that interactions like zooming in or out on the graph using mouse clicks trigger a type of refresh ...

In internet explorer with AJAX, the UI is refreshed by Javascript only when an alert() function is triggered

Having an issue in Internet Explorer, works perfectly in Firefox. There is a javascript function that updates the UI (screen content) before an AJAX call. However, it does not update the UI unless an alert box prompt is used. Without the alert box, the UI ...

Resolving problems with image dimensions in Angularjs and ionic framework

I'm attempting to achieve a design where the first image occupies 50% of the screen's height and 100% of its width, while the second image does the same. Please refer to the image below: https://i.sstatic.net/nwmRP.jpg ...

ERROR: No compatible version of jQuery Foundation could be located

Encountering issues while installing Foundation due to conflicts with Jquery. λ bower install foundation bower foundation#x cached https://github.com/zurb/bower-foundation.git#5.5.1 bower foundation#x validate 5.5.1 against https: ...

Issues related to validation prior to submission

Having trouble with a VeeValidate example from the documentation. The example can be found here. I seem to be missing something crucial but can't figure out what it is. For some reason, my form always validates as valid, even when no text is entered ...

Accessing the "this" object in Vue.js components

When executing console.log(this) in the doSomething method, it returns "null". I was expecting console.log(this.currentPage) to display "main", but unfortunately, the "this" object is null.. :( Is there a way to access the value of "main" for currentPage ...

Analyze the JSON data retrieved from the API endpoint to determine any

I am currently attempting to utilize axios to send an API request in order to validate login credentials, but I am facing difficulties retrieving the result from the API. The MongoDB .find function successfully locates the correct row, however, I am encoun ...

In what way can I ensure that both parameters of a function match a particular Union type?

My goal is to develop a function that takes two parameters. The first parameter is a union type, and the second parameter's type depends on the type of the first one. For instance: type Fruit = "Orange" | "Apple" | "Banana"; function doubleFruit< ...

What are the possible reasons for the failure of JavaScript when called dynamically through Ajax?

I've always been a big supporter of the JavaScript code for sorting tables. It's incredibly effective. However, I recently encountered an issue while trying to make the sorting function work with Ajax. I have a div layer on my main page that fe ...

Issues with creating a Dynamic Dependent Select Box using jQuery and PHP

Currently, I am working on a project for my university. The task at hand involves creating four select boxes: Country, State, City, and Course, where the options of three are dependent on the choice made in another. The user's selection will impact th ...

Is it possible to use Eclipse for debugging AngularJS and TypeScript code?

I recently dove into the world of TypEcs and am currently working on developing a webpage using Typescript and AngularJS that I'd like to debug in Eclipse. Is it feasible to debug a TypeScript and Angular page in Eclipse? If so, could you provide m ...

A loop that incorporates a jQuery JavaScript dropdown menu along with some calculations

My goal is to have multiple dropdown lists populated from a PHP while loop. Each select dropdown has a corresponding textbox that should update its value when a selection is made. However, the current script only works for a single dropdown outside of the ...

Parallax effect overlay for DIV

Planning to give my website a makeover and I'm thinking of adding some parallax effects to make it more engaging. My idea is to have 3 boxes overlapping each other (with the 2nd and 3rd box appearing blurry). These boxes would be placed at the top of ...

Vue.js is alerting you that there could be an endless update cycle happening within a component's render function

My journey with Vue.js & Buefy is just beginning and I've encountered an issue that has left me scratching my head. I have a list of project partners organized by country, and I'm trying to display a list with checkboxes (with Buefy) and cou ...

Ways to remove a dynamic field with jquery

I have developed a script that allows me to add dynamic fields and delete them as needed. However, I am facing an issue where I cannot delete the first element with the "el" class in my script because it removes all elements within the "input_fields_cont ...

PHP: Dynamically update div content upon submission

I am attempting to update the "refresh" div after clicking the Submit button and also at regular intervals of 5 seconds. Despite looking through various resources, I have not been able to find a solution that meets my requirements. <script src="h ...

In Angular JS pagination, the previous filter value is stored in $LocalStorage for future reference

One view displays all order records in a tabular format with 10 records per page. A filter is set to show only paid orders, which pops up filtered data when selected. An issue arises when closing the pop-up window and navigating to the next page of the t ...

Display chosen preferences in an Angularjs dropdown alongside additional options

I'm currently developing a blogging software and have implemented an AngularJS dropdown for selecting post terms. Here's the code: <select multiple="multiple" name="terms" ng-model="post.data.attributes.term_ids" required> ...