Typescript adding to array from within Promise

Question

At the end of the execution the table object has a length of 13 in console log but table.rows[4], for example, returns undefined and console.log(table.rows.length) returns 1. I assume it has something to do with the promise because values added outside of it gets added fine. How would I achieve this from inside the promise?

    let table = new Table();
    let row = new Row();   

    row.AddColumn('"Business Group"');
    row.AddColumn('"Security Profile"');
    row.AddColumn('"User ID"');
    row.AddColumn('"Name"');

    table.AddRow(row);

    pnp.sp.web.siteGroups.get().then(function(data) {
      for (var i = 0; i < data.length; i++) {
          pnp.sp.web.siteGroups.getByName(data[i].Title).users.get().then(function(result) {
            for (var i = 0; i < result.length; i++) {
              row = new Row();
              row.AddColumn('"Business Group"');
              row.AddColumn(`"${data[i].Title}"`);
              row.AddColumn(`"${result[i].id}}"`);
              row.AddColumn(`"${result[i].Title}}"`);

              table.AddRow(row);
            }
        }).catch(function(err) {
            alert("Group not found: " + err);
        });
      }
    });

    console.log(table);
    console.log(table.rows[4]);
    console.log(table.rows.length);

Edit Thank you Phil, this worked

    let table = new Table();
    let row = new Row();   

    row.AddColumn('"Business Group"');
    row.AddColumn('"Security Profile"');
    row.AddColumn('"User ID"');
    row.AddColumn('"Name"');

    table.AddRow(row);

    let promises = [];

      pnp.sp.web.siteGroups.get().then(function(data) {
        for (var i = 0; i < data.length; i++) {
          promises.push(pnp.sp.web.siteGroups.getByName(data[i].Title).users.get());
        }

        Promise.all(promises)
        .then((result) => {
          for (var i = 0; i < result.length; i++) {
            row = new Row();
            row.AddColumn('"Business Group"');
            row.AddColumn(`"${data[i].Title}"`);
            row.AddColumn(`"${result[i].id}}"`);
            row.AddColumn(`"${result[i].Title}}"`);

            table.AddRow(row);
          }

          console.log(table);
          console.log(table.rows[4]);
          console.log(table.rows.length);
        })
        .catch((e) => {
            // Handle errors here
        });
      });

Hover over that little blue _"i"_ in your console for a clue — Phil, Jun 01 '20 at 01:48
Meaning something in your code altered the contents of your array _after_ it was logged to the console. That something is the callback function you pass to `then()` — Phil, Jun 01 '20 at 01:50
I promise (pun intended) that it does. You have one async call in `pnp.sp.web.siteGroups.get()` and then multiple async calls in a loop with `pnp.sp.web.siteGroups.getByName(data[i].Title).users.get()`. The latter is what you need to wait for with `Promise.all`. Only after all those promises are complete will you be able to access `table.rows[4]`, etc — Phil, Jun 01 '20 at 02:35
@Phill can you reopen question so that I can post my fix code and close question with answer or is that not possible? — Shaun Vermaak, Jun 01 '20 at 03:42

Typescript adding to array from within Promise

0 Answers0