invoking an API within a map function and utilizing the response

Question

invoking an API within a map function and utilizing the response

vm.owners = parents.children.map(function(e) {
  getparentById(e.Id)
    .then(function(getresponse) {
      var parentLink = '<a href="/#/parent/onboard/' + e.Id + '"  target="_blank">' + e.Number + "-" + e.Name + "-" + getresponse.code + '</a>';
      return parentLink;
    })
    .finally(function() {
      vm.isLoading = false;
    });
  
}).join('  ||  ');

The code above is attempting to concatenate the values of a looped function with '||' as it iterates through children and makes an API call using getparentbyid. The issue arises when trying to combine the results into a single string due to where the HTML concatenation takes place. Moving it outside the getparentbyid API call works for combining with '||', but the data from getresponse is then inaccessible. Placing it inside the getparentbyid function results in empty spaces being joined by '||'. The challenge here is finding a way to successfully join both pieces of data together. Any suggestions on how to address this dilemma?

javascript angularjs typescript

Answer 1

Answer №1

Your function parameter for .map() must return a value; it's currently not doing so. Add a return statement before the getparentById() call to ensure it returns the Promise created.

After this adjustment, the map() call will produce an array of Promises that should resolve. You can utilize Promise.all() to handle this, returning a single Promise. Subsequently, use .then() on this Promise to manipulate the resulting text array.

vm.owners is only assign-able within this .then() callback due to result availability post completion of all getParentById() calls.

The code setting vm.isLoading = false after assembling each individual link may need adjustment. Consider incorporating finally() directly following the final .then() for proper positioning.

The revised block may resemble:

Promise.all(parents.children.map(function(e) {
  return getparentById(e.Id)
    .then(function(getresponse) {
      var html = '<a href="/#/parent/onboard/' + e.Id + '"  target="_blank">' + e.Number + "-" + e.Name + "-" + getresponse.code + '</a>';
      return html;
    })
}))
.then(function(result) {
  vm.owners = result.join('  ||  ');
})
.finally(function() {
  vm.isLoading = false;
});

To enhance readability, you may opt to employ async/await in restructuring the code. This alternative approach would appear as follows:

const listOfPromises = Promise.all(parents.children.map(async function(e) {
  const getresponse = await getparentById(e.Id)
  return  '<a href="/#/parent/onboard/' + e.Id + '"  target="_blank">' + e.Number + "-" + e.Name + "-" + getresponse.code + '</a>';
}))
const allResults = await listOfPromises
vm.owners = allResults.join('  ||  ')
vm.isLoading = false

To implement this pattern, your code either needs to be enclosed within an async function or incorporate top level await functionality.

Answer 2

Your function parameter for .map() must return a value; it's currently not doing so. Add a return statement before the getparentById() call to ensure it returns the Promise created.

After this adjustment, the map() call will produce an array of Promises that should resolve. You can utilize Promise.all() to handle this, returning a single Promise. Subsequently, use .then() on this Promise to manipulate the resulting text array.

vm.owners is only assign-able within this .then() callback due to result availability post completion of all getParentById() calls.

The code setting vm.isLoading = false after assembling each individual link may need adjustment. Consider incorporating finally() directly following the final .then() for proper positioning.

The revised block may resemble:

Promise.all(parents.children.map(function(e) {
  return getparentById(e.Id)
    .then(function(getresponse) {
      var html = '<a href="/#/parent/onboard/' + e.Id + '"  target="_blank">' + e.Number + "-" + e.Name + "-" + getresponse.code + '</a>';
      return html;
    })
}))
.then(function(result) {
  vm.owners = result.join('  ||  ');
})
.finally(function() {
  vm.isLoading = false;
});

To enhance readability, you may opt to employ async/await in restructuring the code. This alternative approach would appear as follows:

const listOfPromises = Promise.all(parents.children.map(async function(e) {
  const getresponse = await getparentById(e.Id)
  return  '<a href="/#/parent/onboard/' + e.Id + '"  target="_blank">' + e.Number + "-" + e.Name + "-" + getresponse.code + '</a>';
}))
const allResults = await listOfPromises
vm.owners = allResults.join('  ||  ')
vm.isLoading = false

To implement this pattern, your code either needs to be enclosed within an async function or incorporate top level await functionality.

invoking an API within a map function and utilizing the response

Answer №1

Similar questions

Setting an attribute on a custom component that is dynamically created within an Angular application

When using Expressjs MVC, encountering difficulties in retrieving data from mongoose in the listAll() function within the router

When the enter key is pressed in a contenteditable div, line breaks are disregarded

Is it possible to define a state within a map function?

Learn how to incorporate the dynamic array index value into an Angular HTML page

Incorporating a JavaScript script into my Angular 7 project

Execute the JavaScript [ window:print() ] function once the webpage has finished loading along with any

Executing a POST Request using a Custom Node Module in Express

MongoDB: Issue updating the 'role' field of a document

What methods should I employ to effectively test a custom icon function?

What are some ways to streamline inline styling without having to create numerous variables?

Is it appropriate to refer to a single page application as a web 3.0 application?

Enhance the visual appeal of Autodesk Forge Viewer by incorporating environmental textures

Convert Excel Spreadsheet data into an interactive HTML chart in real time

Preventing autoscrolling in Ionic's dual side menu template when additional content is added

I'm curious if there is a method to indicate the specific destination within a separate file that the FS module in Node.js writes the data

What are the best methods for preserving paint color when changing wheel styles, and vice versa?

Unable to update div CSS using button click functionality

Apologies, but it seems there was an issue reading the "checked" property as it is null

Running multiple web applications with different base directories on a single Express server