Creating promises from asynchronous tree-structured APIs in AngularJS can be achieved by following these steps

Question

Creating promises from asynchronous tree-structured APIs in AngularJS can be achieved by following these steps

Dealing with Recursive Promises in a Hierarchical Data Structure

I am facing flow-control challenges within my application. I am working with a nested data structure that resembles a family tree, for example:

{name: "Bob", children: [{name: "Tim", children: [..]}, {another child..}]}

This structure can have multiple levels of depth.

My goal is to recursively traverse all individuals, obtain their ID, and make an API call to fetch their respective pictures.

Pseudo code snippet:

gatherPicture(hierarchy);
console.log("I want to wait before doing this!") // Logs too early
function gatherPicture(person) {
    // api request (promise)
    getPicture(person.id).then(r => {
        person.picture = r;
        person.children.forEach(gatherPicture);
    }) 
}

Hopefully, the provided code snippet clarifies things. How can I ensure that my code waits until the gatherPicture function has successfully processed and resolved all individuals?

If it helps, I am using AngularJS and have access to the $q promise service. However, I am unsure how to construct this specific chain of promises due to them being created within a recursive function.

Thank you!

javascript angularjs recursion promise

Answer 1

Answer №1

In order to achieve success, it is crucial to utilize both $q.all and Array.prototype.map

gatherPicture(hierarchy)
.then(() => {
    console.log("I want to wait before doing this!")
})

function gatherPicture(person) {
    // execute API request (promise)
    return getPicture(person.id).then(r => {
        person.picture = r;
        return  $q.all(person.children.map(gatherPicture));
    }) 
}

Initially, ensure that you return the Promise chain initiated by getPicture within your gatherPicture function, in order to construct a reliable Promise chain.

Next, generate a collection of Promises for each child using

person.children.map(gatherPicture)

and then await resolution utilizing Promise.all

Answer 2

In order to achieve success, it is crucial to utilize both $q.all and Array.prototype.map

gatherPicture(hierarchy)
.then(() => {
    console.log("I want to wait before doing this!")
})

function gatherPicture(person) {
    // execute API request (promise)
    return getPicture(person.id).then(r => {
        person.picture = r;
        return  $q.all(person.children.map(gatherPicture));
    }) 
}

Initially, ensure that you return the Promise chain initiated by getPicture within your gatherPicture function, in order to construct a reliable Promise chain.

Next, generate a collection of Promises for each child using

person.children.map(gatherPicture)

and then await resolution utilizing Promise.all

Answer 3

Answer №2

fetchImage = (user) => {
    loadImage(user.id)
    .then(result => {
        user.image = result;
        return Promise.all(user.friends.map(fetchImage));
    }) 
}

Answer 4

fetchImage = (user) => {
    loadImage(user.id)
    .then(result => {
        user.image = result;
        return Promise.all(user.friends.map(fetchImage));
    }) 
}

Answer 5

Answer №3

To optimize the process, one strategy is to initially flatten the tree structure:

const flattenTree = (tree) => (tree.children || [])
  .reduce((flattened, child) => flattened.concat(flattenTree(child)), [])
  .concat(tree);

Next, consider a basic function called fetchImage:

const fetchImage = (person) => retrieveImage(person.id).then((image) => {
  person.image = image;
});

Now, you can efficiently handle all tasks concurrently by awaiting their completion:

const fetchImages = (tree) => Promise.all(flattenTree(tree).map(fetchImage));

To implement this, use:

fetchImages(hierarchy).then(() => {
  console.log("Operation completed");
});

Answer 6

To optimize the process, one strategy is to initially flatten the tree structure:

const flattenTree = (tree) => (tree.children || [])
  .reduce((flattened, child) => flattened.concat(flattenTree(child)), [])
  .concat(tree);

Next, consider a basic function called fetchImage:

const fetchImage = (person) => retrieveImage(person.id).then((image) => {
  person.image = image;
});

Now, you can efficiently handle all tasks concurrently by awaiting their completion:

const fetchImages = (tree) => Promise.all(flattenTree(tree).map(fetchImage));

To implement this, use:

fetchImages(hierarchy).then(() => {
  console.log("Operation completed");
});

Creating promises from asynchronous tree-structured APIs in AngularJS can be achieved by following these steps

Dealing with Recursive Promises in a Hierarchical Data Structure

Answer №1

Answer №2

Answer №3

Similar questions

Is it necessary to have the script tag as the first tag in the body of the HTML?

What is the best way to restrict the input options for a String field within a TextField component in Material-UI?

Implementing Fullpage.js with persistent elements throughout slides

Click a button to dynamically create a div element with jQuery

When exporting a Mongoose model, it mysteriously becomes undefined

The current error received from navigator.geolocation.getCurrentPosition is "Position acquisition error: Unknown."

Applying an active class in VueJs to a specific li element within a v-for loop when clicked

Integrating Illumination into a ShaderMaterial in three.js

Contrasting onevent with addEventListener

A single feature designed to handle various elements

Logging Modal Toggle Clicks

Failure to display updated property value

The navigation bar's HTML hue

How can you determine the HTML element where a mouse click took place?

Struggling to iterate through the children of a variable with the help of express-handlebars?

The passing of parameters from Angular to Web API during a POST request is not functioning properly

Navigating the landscape of asynchronous asset loading can present challenges. Attempting to access assets immediately may result in receiving

Having trouble transferring sound files to Cloudinary API through javascript

Tips for ensuring that the click event function properly for numerous elements sharing the same class

Verify if the element is present before commencing any tasks