Run an API request for each row in a table

Hello, I am following this tutorial, and seems it works. But actually the tutorial itself is not really helpful as the API in the example conclude with an Error.
I would like to understand, instead of concluding in visualizing errors in the Text Errors, how to visualize the query request data.
Actually I add to my javascript code (query2) a text box, named "text1" and the following code at the end of the javascript function:

var rows = table1.data;
var errors = '';
var total = rows.length;

function runQuery (i) {
  // Update the Status text
  Status.setValue('Progress: ' + (i.toString() + '/' + total.toString()))
  
  if (i >= rows.length) {
    console.log('Finished running all queries');
    return;
  }

  console.log('Running query for row', i);

  query1.trigger({
    additionalScope: { i: i }, // This is where we override the `i` variable
    // You can use the argument to get the data with the onSuccess function
    onSuccess: function(data) {
      runQuery(i + 1);
    },
    onFailure: function(error) {
      // Update the Errors text
      errors += 'Found error at line ' + i.toString() + ':  ' + error +  '\n\n';
      Errors.setValue(errors);
      runQuery(i + 1);
    }
  });
}

runQuery(0);
text1.setValue(query2.data); // ADDED BY ME
console.log(query2.data); // ADDED BY ME

But even if the API works, nothing appear in my console and nothing in my text1.
What I am missing?

Anyway I suggest to make tutorial on your docs that shows both how to visualize an error and both how to visualize the successful result, because it's tricky and confusing.
Thank you!

Hey there @abovethecloud!

Since the queries are ran asynchronously, meaning your code finishes executing and console.log(query2.data) is run before the query actually has a chance to return anything. The tutorial you're referencing gets around this by making use of callback functions that don't run until the data has been returned in order to be able to process it.

This code pattern can be somewhat confusing though and it is possible to have your code pause and wait for the query to return, before proceeding. You can do this by using async/await instead of callbacks.

You'll want to first, make sure that you have this option selected for your larger JS query so that all references to your app are kept up to date:

Then, you can try running something like:

var total = table1.data.length;
for(let i = 0; i < total; i++){
   await query1.trigger({additionalScope: {i: i}});
   console.log(query2.data);
}

Alternatively, you can assign the query.data value directly to a variable as follows:

var total = table1.data.length;
for(let i = 0; i < total; i++){
   var data = await query1.trigger({additionalScope: {i: i}});
   console.log(data);
}

In which case you don't actually need to keep your variable references in sync with the option mentioned above!

Let me know if this helps get you closer to displaying error messages. I'll also bring your suggestion to our team so that we can get more coverage in the tutorials we provide.

1 Like

Thanks for your help, I would like you to close this topic and move here to avoid double posting.
I tried using the two code you posted, but actually the result is the same you can see in the video I posted in the last comment of my other topic.
The query run perfectly, but the result didn't return in the table, it just appear and then disappear. Happy if you have any chance to take a look!