Performing a synchronous loop with Javascript promises

I've been struggling with a seemingly simple task that's been causing me immense frustration. Despite scouring the entire Internet, none of the solutions I found seem to directly address my specific issue. It all stems from a follow-up question related to JavaScript - no return

Below is the code snippet in question:

var worksheetArray;
var filtersArray =[];

function testu(){

  filtersArrayFetch();
  console.log("finished fetching");
  console.log(filtersArray);
  //perform more operations on the array

}

function filtersArrayFetch()
{

    workbook = viz.getWorkbook();
    sheet=viz.getWorkbook().getActiveSheet();
    worksheetArray = sheet.getWorksheets();


        for (var i=0; i<worksheetArray.length; i++) {
          (function(num){
            worksheetArray[i].getFiltersAsync()
                .then(function(promise){
                    for (j=0;j<promise.length;j++)
                    {
                        filtersArray.push(promise[j].getFieldName());
                    }
               })

          })(i);  

         }
console.log("after for");

}

To explain in simpler terms - I have an array of worksheets fetched using synchronous Tableau API function. The getFiltersAsync() function returns a Promise as an Array. My goal is to extract the field names using getFieldName and store them in a final Array for later use in the code. Everything seems to work up until

worksheetArray[i].getFiltersAsync()
, but it fails to evaluate the .then() method and ends up returning undefined to the testu() function. This function is triggered by a button click event. I must ensure compatibility with IE (Edge), so using Promise.all() is not a viable solution.

What could be causing the script to malfunction? Why isn't it processing the .then() method?

UPDATE:

I was able to resolve the issue by implementing a self-invoking runner function:

function filtersearch2(i){
    workbook = viz.getWorkbook();
    sheet=viz.getWorkbook().getActiveSheet();
    worksheetArray = sheet.getWorksheets();

    var filtersArray=[];
    var d=$.Deferred();

    (function runner(i){ 

        worksheetArray[i].getFiltersAsync().then(
        function(filtersArrayReturnedInPromise){

        for (z=0;z<filtersArrayReturnedInPromise.length;z++){
            field = filtersArrayReturnedInPromise[z].getFieldName();

            if (field.search("AutoFilter")>0 && field.search("Action")==-1 ){
                filtersArray[filtersArray.length]=field; 
            }

        }

        if (i==worksheetArray.length-1){
            var uniq = filtersArray.reduce(function(a,b){
            if (a.indexOf(b) < 0 ) a.push(b);
            return a;
                },[]);

        console.log("resolving filtersearch");
        d.resolve(uniq);

        } else {

            i++;
            runner(i);
        }

        });

    })(i)

return d.promise();
}

Answer №1

It's essential to utilize local variables and avoid cluttering the global namespace.

I have revised your code to handle promises correctly.

In order for other functions to work with the result of its computation, filtersArrayFetch() must return a promise. Additionally, testu() needs to utilize this promise to determine when filtersArrayFetch has completed its task.

Your previous code neglected to wait for the promises to resolve before attempting to process or log the filtersArray. The method of using a global/shared filtersArray that is modified within promises poses risks and unpredictability. Deploying this pattern in a function called twice can lead to chaotic outcomes, causing frustration during debugging due to uncertainty on when promises will complete and add items to the array.

function testu(){
    filtersArrayFetch().then(filtersArray => {
        console.log("finished fetching");
        console.log(filtersArray);      
        //perform additional operations with array
    });
}

function filtersArrayFetch() {
    //a couple of functions defining tasks/steps required 
    //for the overall task.

    //Array<Array<*>> -> Array<*>
    var flatten = arrays => [].concat(...arrays);

    //filter -> fieldName
    var getFieldName = filter => filter.getFieldName();

    //Array<filter> -> Array<fieldName>
    var filtersToFieldNames = filters => filters.map(getFieldName);

    //worksheet -> Promise<Array<fieldName>>
    var worksheetToFieldNames = worksheet => worksheet.getFiltersAsync().then(filtersToFieldNames);

    //based on your code, up to this point everything should be synchronized.
    var worksheets = viz.getWorkbook().getActiveSheet().getWorksheets();

    return Promise.all(worksheets.map(worksheetToFieldNames)).then(flatten);
}

worksheets.map(worksheetToFieldNames)
transforms an Array<worksheet> into an
Array<Promise<Array<fieldName>>>
. After passing this through Promise.all(), we obtain a
Promise<Array<Array<fieldName>>>
; a promise containing an array of field names for each worksheet.

Subsequently, upon using .then(flatten), we arrive at a simple

Promise<Array<fieldName>>
.

Once we begin dealing with promises, it is imperative to continue handling promises. We cannot extract values synchronously anymore. Therefore, this function can only return a Promise (of any kind).

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

Adjust the background color of child divs when the parent div is being hovered over

I am facing a challenge with my current setup: <div class="parent"> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> </div> My goal is to change the background co ...

What is the best way to instruct jQuery to disregard an empty server response?

After examining this piece of code: $.ajax({ type: "POST", url: theRightUrl, data: whatToPost, logFunction: whatever, suppressSuccessLogging: !0, dataType: "html" }); I encountered an issue where Firefox displays a "no element ...

Using linked lists as parameters in functions

I've been working on implementing a waiting list system that makes use of an array of linked lists. While I have some experience with linked lists, I'm struggling with passing the array into functions correctly. Initially, I declared arrays of he ...

Sending data through a form using AJAX and PHP

Greetings! I've developed a page that allows users to view results for a specific tournament and round. The user will first select a sport, which will then populate the available tournaments based on the sport selection. Following this, the user can ...

Using JavaScript to search for a specific string within a row and removing that row if the string is detected

I need help with a script that removes table rows containing the keyword STRING in a cell. However, my current script is deleting every other row when the keyword is found. I suspect this has to do with the way the rows are renumbered after deletion. How c ...

Modifying the app.css file in the source tab of dev tools does not cause any changes in the DOM when working with a

Just starting out with react js here. While exploring developer tools in Chrome, I attempted to tweak some CSS in the elements panel and noticed the changes reflecting above in the DOM. However, when I navigate to the sources tab, I'm unable to modify ...

Connecting a button's action to a specific element in an array using AJAX and Firebase

I am currently working on a project that involves making an AJAX request from a social API and then appending the results with a button inside the div. This button is meant to save the corresponding item in the array to my Firebase database. For brevity, ...

Arranging elements on top of a fixed element using JavaScript and CSS

Currently, I am implementing Javascript code that adds a div to the body of pages. The purpose of this div is to always stay at the top of the document or window, regardless of the page's design and content. Everything was functioning correctly until ...

Ajax updates previous text to new text upon successfully completing the task

I have a question regarding changing text using AJAX after success. I have written this AJAX code which is functioning properly. However, I aim to replace the old text with new text in the .chnged div. For instance: <input type="text" name="text" va ...

Using data across multiple instances in node.js EJS partials

I need some advice regarding my nodejs project. I have created a sidebar partial that requires user data to be displayed on it. This sidebar is utilized across multiple pages in the project. However, currently, I have to include the user data in every func ...

The POST response I received was garbled and corrupted

Operating under the name DownloadZipFile, my service compiles data and constructs a Zip file for easy downloading. This particular service provides a response that contains the stream leading to the file. A Glimpse of the Service: [HttpPost] public Actio ...

Unable to get Angular ng-click to function properly when used in conjunction with $

I am encountering an issue with triggering a click event in my Angular app using code similar to the example below. Can anyone help me understand why the event is not being triggered? var app = angular.module("myApp", []) app.directive('myTop', ...

Retrieving a specific key-value pair from an object within a JavaScript array

Looking to extract a specific value from an array of objects using array.map? Check out the code snippet below: let balanceInfo = students.map((student) => { if (typeof(student) === Object){ let balance = student.balance; return balanc ...

Posting a JavaScript string to a C# backend in ASP.NET Core MVC: A step-by-step guide

I am a beginner in ASP and facing an issue while attempting to pass a string from my JavaScript code to my controller. The intention is to utilize this string for querying my database. JavaScript function findEmployees(userCounty) { $.ajax({ t ...

Execute index.js code from index.html using NodeJS and Express

Currently, I am diving into the world of NodeJS and Express using Replit.com for a small project. The main objective is to develop a basic input field that, upon submission, will post to different channels such as Discord and Twitter. The piece of code be ...

How can you effectively transfer a parameter from .run to .config?

Currently, I am working on my angularjs ui-route project and have placed a variable called clientid in the .run() core function to store it in $rootScope. However, there comes a point where I need to access this stored variable within the .config() core. ...

The TypeScript datatype 'string | null' cannot be assigned to the datatype 'string'

Within this excerpt, I've encountered the following error: Type 'string | null' cannot be assigned to type 'string'. Type 'null' cannot be assigned to type 'string'. TS2322 async function FetchSpecificCoinBy ...

Automatic Slideshow

I am trying to implement autoplay in my slider, but I am having trouble figuring out how to do it. The slider itself is working fine, but I know that I need to use an interval for the autoplay feature. If anyone could provide some assistance on how to ac ...

Array filtering using one array condition and additional boolean conditions

Sorting through the carArray based on user-specified conditions. If a user selects the red checkbox, only cars with red paint will be displayed. If a user selects the green checkbox, only cars with green paint will be displayed. If both the red and green ...

Unit tests manipulating JavaScript functions to return undefined values

Currently, I am in the process of testing some JavaScript functions within a larger React application. These functions heavily utilize the module pattern, which leads me to believe that my misunderstanding lies within this pattern. The script I am testing ...