Looping through a series of URLs in AngularJS and performing an $

Question

Looping through a series of URLs in AngularJS and performing an $

Currently, I am facing an issue while using angular.js with a C# web service. My requirement is to increment ng-repeat item by item in order to display updated data to the user. To achieve this, I attempted to utilize $http.get within a loop to refresh the data for each item. However, I encountered difficulties as it did not work as expected.

for (var i = 0; i < conditions.length; i++) {
        var configFullAsset = {
            params: {
                Field: Field,
                SAM_ConnectionString: SAM_ConnectionString,
                TreeElemId: conditions[i][0],
                ConditionDate: conditions[i][1]
            }
        };
        $http.get('application.asmx/getExtFullAssetHealth', configFullAsset)
            .success(function (responseExt) {
                console.log("Element: ", i);
                if (i == 0) 
                {
                    $scope.showData = responseExt;

                    $scope.fullAssetTable_loading = false;
                    $scope.fullAssetTable_loaded = true;
                }
                else
                    $scope.showData = $scope.showData.concat(responseExt);

                //console.log("Data item: ", $scope.showData[i].Tag);

                $scope.fullData = $scope.showData;
                $scope.filterData(customFilter);
            })
            .catch(function (err) {
                console.log("Error get object: ", err);
            })
            .finally(function () {
                // Hide loading spinner whether our call succeeded or failed.
                //$scope.loading = false;


                $scope.fullData = $scope.showData;
                $scope.filterData(customFilter);
                $scope.fullAssetTable_loading = false;
                $scope.fullAssetTable_loaded = true;

                console.log($scope.fullData);
            });
    }

javascript angularjs get

Answer 1

Answer №1

The issue with your code lies in the following: you are using 'i' as an index in the success method, but it is not behaving as expected because the loop continues until the first success is called.

To make your code more readable, you can construct the requests like this in the initial phase:

function buildRequests() {
    return conditions.map(function(condition) {
        var configFullAsset = {
            params: {
                Field: Field,
                SAM_ConnectionString: SAM_ConnectionString,
                TreeElemId: condition[0],
                ConditionDate: condition[1]
            }
        };

        return $http.get('application.asmx/getExtFullAssetHealth', configFullAsset);
    });
}

You can then handle all the requests in this manner:

function handleRequests() {
    var requests = buildRequests();
    $q.all(requests)
        .then(handleRequests)
        .catch(function(error) {
            console.log(error);
        })
        .finally(function() {
            $scope.fullData = $scope.showData;
            $scope.filterData(customFilter);
            $scope.fullAssetTable_loading = false;
            $scope.fullAssetTable_loaded = true;
        });
}

Next, iterate over each result to make the necessary changes:

function handleResults(results) {
    results.forEach(function(response, i) {
        console.log("Element: ", i);
        if (i == 0) 
        {
            $scope.showData = response;

            $scope.fullAssetTable_loading = false;
            $scope.fullAssetTable_loaded = true;
        }
        else
            $scope.showData = $scope.showData.concat(response);

        //console.log("Data item: ", $scope.showData[i].Tag);

        $scope.fullData = $scope.showData;
        $scope.filterData(customFilter);
    });
}

Remember to inject $q as a dependency injection.

Answer 2

The issue with your code lies in the following: you are using 'i' as an index in the success method, but it is not behaving as expected because the loop continues until the first success is called.

To make your code more readable, you can construct the requests like this in the initial phase:

function buildRequests() {
    return conditions.map(function(condition) {
        var configFullAsset = {
            params: {
                Field: Field,
                SAM_ConnectionString: SAM_ConnectionString,
                TreeElemId: condition[0],
                ConditionDate: condition[1]
            }
        };

        return $http.get('application.asmx/getExtFullAssetHealth', configFullAsset);
    });
}

You can then handle all the requests in this manner:

function handleRequests() {
    var requests = buildRequests();
    $q.all(requests)
        .then(handleRequests)
        .catch(function(error) {
            console.log(error);
        })
        .finally(function() {
            $scope.fullData = $scope.showData;
            $scope.filterData(customFilter);
            $scope.fullAssetTable_loading = false;
            $scope.fullAssetTable_loaded = true;
        });
}

Next, iterate over each result to make the necessary changes:

function handleResults(results) {
    results.forEach(function(response, i) {
        console.log("Element: ", i);
        if (i == 0) 
        {
            $scope.showData = response;

            $scope.fullAssetTable_loading = false;
            $scope.fullAssetTable_loaded = true;
        }
        else
            $scope.showData = $scope.showData.concat(response);

        //console.log("Data item: ", $scope.showData[i].Tag);

        $scope.fullData = $scope.showData;
        $scope.filterData(customFilter);
    });
}

Remember to inject $q as a dependency injection.

Looping through a series of URLs in AngularJS and performing an $

Answer №1

Similar questions

Linking a Git repository as a dependency in the package.json file

Vue alert: The instance does not have a defined "hp" property or method, but it is referenced during rendering

What is the best way to incorporate real-time push notifications on my website?

Is it possible to utilize a map in Python or incorporate other advanced functions to efficiently manage indices?

The call to Contentful's getAsset function resulted in an undefined value being

Remove the initial section of the text and provide the rest of the string

Trouble with Bootstrap 5 Dropdown Menu failing to drop down

Alternative solution to avoid conflicts with variable names in JavaScript, besides using an iframe

What is the best way to designate unique custom login redirects based on user type?

Angular UI Bootstrap collapse directive fails to trigger expandDone() function

Another option could be to either find a different solution or to pause the loop until the

Tips for choosing an option in a form using Selenium with JavaScript

The public folder in Node.js is known for its tendency to encounter errors

Navigating using angular's UI router - Save for later option

Error: Attempting to access the value property of a null object within a React Form is not possible

Unable to Trigger Virtual Click Event on Calendar in JavaScript

I have decided to integrate Laravel with Vite for building CSS and JS. However, when I attempted to run `npm run dev`, it appeared to execute but was accompanied by an error in the background that

Is there a way to retrieve a cell value from a database and use it as the default selection in a dropdown list using AngularJS?

The slider customization on Joomla is functioning perfectly on my local machine, but it seems to be encountering some issues on

The angular-block-ui feature fails to run my HTML code as a personalized message