execute code after callback function finish

Question

i want to execute addFormLayoutSectionFieldsView() function after all callback finish in this code Ts file

webPart._getListDataSources(xComp).then((response) => {
            let dItems: List_Item[] = response.value;
            dItems.forEach((item: List_Item) => {
              dataSourceId = item["Id"];
              webPart._getListDataSourceFieldsData(dataSourceId).then((response) => {
                let pItems: List_Item[] = response.value;
                pItems.forEach((item: List_Item) => {
                  AddSectionFieldHtml1 += `<option value= "${item["Id"]}"> ${item["Id"]} </option>`;
                  console.log(AddSectionFieldHtml1);
                });
              });
            });
          });
            
webPart.addFormLayoutSectionFieldsView(FormLayoutSectionId);```

         

Answer 1

To solve this problem I've always used Promise.all alongside map

webPart._getListDataSources(xComp).then((response) => {
            Promise.all(response.value.map((item: List_Item) => {
              dataSourceId = item["Id"];
              return webPart._getListDataSourceFieldsData(dataSourceId).then((response) => {
                let pItems: List_Item[] = response.value;
                pItems.forEach((item: List_Item) => {
                  AddSectionFieldHtml1 += `<option value= "${item["Id"]}"> ${item["Id"]} </option>`;
                  console.log(AddSectionFieldHtml1);
                });
              });
            });
          })).then(() =>             
            webPart.addFormLayoutSectionFieldsView(FormLayoutSectionId);
          )```

So here instead of just iterating over all the items and doing new async calls, you are turning each item into a promise, collecting that array of promises with Promise.all , and then when all promises are finished, executing the callback passed to the Promise.all(...).then .

For example,

Promise
  .all([1,2].map(Promise.resolve)
  .then(() => console.log('Done with promises!'))

That will turn 1 and 2 into promises, and then when both resolve, the console will get logged to.