Using image onload field in a report leads to the repeated execution of the javascript and thereby leads to incorrect output

1) "I looked at the new code and could not evaluate the piece of code that would query for the specific parent record or set of records in a report?"

My code queried all child records using {qid: 6} for simplicity of the demo. Again, you will have to modify the code to provide the correct context of those child records you want to concatenate to the parent.

2) "I added a new Actor (to the Movie record Dr.No) in your example database and the concatenated text did not get updated."

It shows up when I run the script anew:



3) "Would it be possible for you to add the brief comments ...?"

Sure I was just wallowing away my time watching CNN coverage of IRMA consisting of a bunch of man-in-the-street reporters ignoring their own advice to take cover.

More Notes:

(1) this piece of code simply protects all code within from creating conflicts with QuickBase's global variables:

(function(){
  // rest of script
})();

(2) this piece of code defines a bunch of parameters that would need to be modified if you moved the code to another application

  var dbid = "bm3wfa883";
  var dbidMovies = "bm3wfa894";
  var dbidActors = "bm3wfa9a2";
  var apptoken = "cwk6g85n9e79c5kask3dyd9wi2";
  $.ajaxSetup({data: {apptoken: apptoken}});

(3) this piece of code defines an async function named process() and then calls that function:

 async function process() {
  // definition of async function
  }
  process();

(4) this piece of code wraps a jQuery promise in a native JavaScript promise so it can be awaited:

    var xml1 = await Promise.resolve(
      $.get(dbidActors, {
        act: "API_DoQuery",
        qid: "6"
      })
    );

The await keyword can only be used within an async function. The await keyword causes the function to suspend executing temporarily until the promise returns its result (xml1).

(5) this piece of code (with some console.log{}'s added for debugging) converts the XML response into an array of objects containing the same information:

    var data = $("record", xml1).map(function(index) {
      var charactor = $("character", this).text();
      var actor = $("actor", this).text();
      var relatedMovie = $("related_movie", this).text();
      return {charactor, actor, relatedMovie};
    }).get();
    console.log("\ndata:");
    console.log(JSON.stringify(data2, null, "  "));

(6) this piece of code randomly generates a new delimiter for the concatenated child records to provide a visual indication that the operation was successful:

    var delims = ",./|&#!~"; 
    var delim =  " " + delims[Math.floor(Math.random() * delims.length)] + " ";

(7) this piece of code uses the underscorejs library to reformat that data by (a) grouping child records together, (b) mapping the child records into a concatenated string, and (c) returning an array of objects:

    var data2 = _.chain(data)
      .groupBy("relatedMovie")
      .tap(function(x) {
        console.log("\nafter grouping:");
        console.log(JSON.stringify(x, null, "  "));
       })
      .map(function(data, key) {
        var cast = _.pluck(data, "actor").join(delim);
        return {rid:key, cast: cast};
      })
      .tap(function(x) {
        console.log("\nafter mapping:");
        console.log(JSON.stringify(x, null, "  "));
      })
      .value();

The code above is modified with tap() methods to provide console debugging of each step.

(8) this piece of code logs the final processed data which will be iterated over in the next step:

    console.log("\ndata2:");
    console.log(JSON.stringify(data2, null, "  "));

(9) this piece of code iterates over each element in the data array and performs a API_EditRecord on each element of the array:

    data2.forEach(async function(item) {
      var xml2 = await Promise.resolve(
        $.post(dbidMovies, {
          act: "API_EditRecord",
          rid: item.rid,
          _fid_12: item.cast
        })
      );

We could easily modify the script to concatenate all child records to the parent with one call to API_ImportFromCSV but the whole point of this demo (from my perspective) is to introduce you to Async /Await and to reinforce the idea that this technique allows you to make an arbitrary amount of asynchronous network requests written as if they were synchronous operations.

(10) this piece of code does a final reload of the page when all the async operations are completed

document.location.reload(true);