Angular efficiently organizes data retrieved from various http requests

I have encountered a significant issue in this particular scenario. I am retrieving data from the GitHub API using the code provided below. However, due to GitHub's limitation of only allowing 30 results per page, I would like to fetch all the data for better sorting options and store it in a single array of objects.

$scope.getData = function () {
        $http({
            method: "GET",
            url: apiUrl + pageNum
        }).then(function mySuccess(response) {
            $scope.myData = response.data;
            $scope.isLoading = false;
            $scope.result = $scope.myData.map(function (obj) { return { 'name': obj.name, 'html_url': obj.html_url }; });

        }, function myError(response) {
            $scope.error = response.statusText;

        });
    };

Although the above code works effectively, I am aiming to achieve something similar to the following:

$scope.getData = function () {
for(var i = 0; i <= $scope.pages.length; i++){
        $http({
            method: "GET",
            url: apiUrl + i
        }).then(function mySuccess(response) {
            $scope.myData = response.data;
            $scope.isLoading = false;
            $scope.result = $scope.myData.map(function (obj) { return { 'name': obj.name, 'html_url': obj.html_url }; });

        }, function myError(response) {
            $scope.error = response.statusText;

        });
    };

Do you have any suggestions on how to accomplish this task?

Answer №1

Make sure to refer to the $q documentation on the AngularJS official website.

$scope.retrieveData = function () {
    $scope.responseArray = [];
    $scope.errorMessages = [];
    $q.all($scope.pageList.map(function(page) {
        return $http({
            method: "GET",
            url: "apiUrl" + i
        })
        // This callback function will be executed after each API call.
        .then(function handleSuccess(response) {
            $scope.dataSet.push(response.data);
            $scope.responseArray.push($scope.dataSet.map(function (entry) { return { 'name': entry.name, 'html_url': entry.html_url }; }));

        })
    }))
    // This final block will run once all API calls are completed.
    .then(function(success) {
        $scope.loadingComplete = false;
    }).catch(function (error) {
        $scope.errorMessages = response.statusText;
    });
}

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

Transform a loaded image into canvas

I have encountered a challenge while working on a plugin where I need to convert an Image into Canvas and store it as data URL. The function currently triggers on the 'load' event, but how can I achieve this conversion for an image that is alread ...

Is it possible that Angular 1.0.8 code is incompatible with version 1.6.5?

Just started dabbling in angular-js today and decided to experiment with some older examples. I have a backend api that provides me with a json list. I am trying to fetch this data and display it on my webpage. The examples I found were built using versi ...

Issues with Angularjs $http.get functionality

On the server side of my ASP.net MVC application, I have a method that looks like this: [HttpGet] public JsonResult GetTrenings(string treningId) { var tempId = Guid.Parse(treningId); var trening = TreningService.GetTreningById ...

Looking to modify the CSS of an element during a drop event using interact.js?

I've encountered an issue in my code where setAttribute and .transform are not working as expected. I have tried using them within the ondrop event function, but with no success. interact('.dropzone') .dropzone({ // Setting the r ...

Transferring Visitor's Country Code Between Two Web Applications Using .NET Framework (ASP/MVC)

I'm currently working on developing an application that collects user information such as country, city, and IP address of the website they're visiting. This data is then sent to another web application of mine, which will be automatically update ...

What sets apart script fields from lifecycle methods in Grapesjs?

As a newcomer to Grapesjs, I came across the introduction on the Grapesjs documentation website: If we have code similar to this: editor.BlockManager.add('test-block', { label: 'Test block', attributes: {class: 'fa fa-text&ap ...

What is the proper way to bind CoreUI's CSwitch component?

I am trying to incorporate the CSwitch component into a DevExtreme data grid. While the DxSwitch component functions correctly, I am unable to get the CSwitch to work properly. It seems like I might be using the wrong binding. Could that be the issue? < ...

What is the method for transferring the input value from a prompt to a function?

I'm currently working on developing a hangman game with react and js. I encountered an issue where after clicking the Guess word button, I intended to use a prompt box for users to input their guess of the full word. However, when I tried entering a w ...

What is the best way to refresh a single component in my application without causing the other components to reload?

I've been working on a review application with Vue.js that fetches random facts from an API (https://uselessfacts.jsph.pl/random.json?language=en) and allows users to provide feedback through radio buttons and text inputs. Once submitted, the feedback ...

The function RenderItems is being referenced but is not defined within the return statement, causing

Hey everyone, I'm relatively new to ReactJS and I'm currently working on getting response data objects to display on a web app without users having to inspect the page or check the network/console for file upload error responses with the name &ap ...

Guidelines for leveraging AngularJS Decorators to deactivate a button within an Html document

Currently, I am utilizing the blur admin theme and exploring the possibility of using decorators to hide a button without directly modifying the HTML. Despite my efforts, I have been unable to successfully conceal the button. Can someone provide guidance o ...

What could be causing the error message "Uncaught ReferenceError: userId is not defined" to appear for me?

Despite the fact that my alert($userId) is displaying 1 (which is the user id), I am still receiving an error indicating that userId is not defined. Any thoughts on why this might be happening? $('.postComment').on('click', function(ev ...

Utilizing the power of Ruby on Rails, the PaperClip gem, Rabl for efficient JSON rendering,

Currently, I am using Rails with Paperclip and Rabl on the backend while Angular is implemented on the frontend. Within rabl, I am appending the URL of a photo that I would like to display on the frontend. On the frontend, I have the following link: "/p ...

Exploring the power of the JavaScript this keyword

Can you explain the purpose of the line this.tasks = tasks; in relation to the constructor method? class TaskCollection { constructor(tasks =[]) { this.tasks = tasks; } } ...

Generating an associative array on the fly

I am interested in transforming a hash by creating nested keys and then adding another hash at the end. For example... var hash_a = {'foo': 'bar'} var hash_b = {'alpha': 'beta'} var array = ['a', 'b& ...

What is the best method for caching inline SVG in web browsers?

Over the years, SVGs have remained popular due to their scalability. One key advantage of inline SVG is the ability to manipulate it with CSS and JS. Additionally, using the <use> tag allows for referencing the original element when repeating the sam ...

Filtering an array of <input> values in JavaScript based on the number of characters they contain

Can someone help me figure out why this JavaScript code isn't working as expected? The intention is to grab the input value from a text box (a string of words separated by spaces), convert it into an array, and then remove any words that are less than ...

Is there a way to trigger this pop-up after reaching a certain percentage of the page while scrolling?

I've been working on a WordPress site that features an "article box" which suggests another article to users after they scroll to a certain point on the page. However, the issue is that this point is not relative but absolute. This means that the box ...

Hovering triggers the appearance of Particle JS

I am attempting to add particle js as the background for my website. I have tried implementing this code snippet: https://codepen.io/nikspatel/pen/aJGqpv My CSS includes: position: fixed; z-index: -10; in order to keep the particles fixed on the screen e ...

Navigating through Angular: Displaying unique sub-navigation for varying perspectives

I'm grappling with how to handle the menu in my app, which remains consistent across all pages/views, while the sub menu varies depending on the main page/view. Currently, I have both menus placed in the body, along with an ng-view element. Initially ...