Show animated text for mulitple API calls using Jquery

I need to make a list of web api calls(for eg: 20) on a user click. Each web api is to update particular user. I m looping through each user and calling the web api using $.ajax() method.

In order to show the progress, I m using a spinner. Below the sprnner I wanted to show progress of each web api call. That means in success of web api call I wanted to show the user name detials(for eg: John's Information updated). So the the text should change for every success call and set the html value. I wanted to show this as animated text one after the other.

John's Information updated Next -> Sam's Information updated Next -> Dan's Inforamtion updated on

Note: Above line should be shown one at a time. its not append, its replace of name for every success call.

for(var i=0; i < userArray.Length; i++)
      url: '<some url>',
      method: 'PUT',
      data: userData,
      sucess: function(response){
          $('#displayText').html(`${userData.Name}'s Information Updated`);

The above code is not showing the user names one by one, its not changing the value of the displayText id in every service success call and showing the progress in anumated way.

I also tried using setInterval and setTimeOut inside the success but no luck. Please help.

Read more here:

Content Attribution

This content was originally published by Bharathg at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: