Moving the Promise.all feature from AngularJs to VueJs

I'm currently facing a challenge with moving a function from AngularJs to VueJs. I would really appreciate any help or suggestions you may have!

items = {
    one: {...details here...},
    two: {},
}

In AngularJs:

var promises = [];
var deferred = $q.defer();

angular.forEach(items, function(details) {
    promises.push(details.promise);
});

$q.all(promises).finally(function() {
    deferred.resolve();
});

return deferred.promise;

Here's what I've come up with in VueJs so far:

let promises = [];

for (let [name, details] of Object.entries(items)) {
    promises.push(new Promise((resolve) => {resolve(details)}));
}

return Promise.all(promises);

Any feedback is highly appreciated! Thank you!

Answer №1

Using Promise.all removes the requirement of using new Promise for non-promise values.

If you have a promise that resolves with undefined when all object values are settled, you can achieve this by:

Promise.all(Objects.values(items).map(({ promise }) => promise))
.then(() => {}) // resolve with undefined
.catch(() => {}) // don't reject

If not all values are promises, then there is no need to use Promise.all.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Seeking guidance on designating an additional disk for fs.readdir(path) within an Electron-vue application?

Issue: I am facing a problem with the breadcrumbs component in my project, which is utilizing file explorer functionality from this specific project. The issue at hand is related to changing the disk being displayed by the component. Upon clicking on any ...

Discover the power of utilizing the reduce function to extract the value of a specific field within an array of Objects

In the following example, we have an object with 3 forms: formA, formB, and formC. Form A and B are objects, while formC is an array of objects that can contain multiple items. const object: { "formA": { "details": {}, ...

Error: JSDOM - The document variable has not been declared

After creating a basic webpage that displays a single message, I decided to experiment with JSDOM and encountered an error. Despite researching online examples and Stack Overflow questions, I have struggled to resolve even the most straightforward scenario ...

Setting up computed properties in VueJSSetting up computed values in

I am currently working on developing a lottery number service, and I am curious about how to set up computed properties. I came across the Vue.js documentation for computed properties at https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties. I tr ...

Can one retrieve an express session using the sessionID given?

I have a NodeJS Express application with express-session that works well, however, it needs to be compatible with a cookie-less PhoneGap app. My question is: Can I access the data in an express session using the sessionID? I was thinking of adding the se ...

Add United States as an additional attribute to the countries retrieved from the API

I am working with an API that provides data in a specific format: [ { "id": 12, "acf": { "address": { "city": "Bandar Penawar", "state": "Johor", "country ...

Issue arises with AngularJS unit tests no longer functioning properly following implementation of $httpBackend

Recently, I encountered a situation where we needed to access a "restful" service that was not under our control. In order to receive JSON data from the service through a GET call, we had to include Content-Type="application/json" in the header. The proble ...

Updating an Object in vue.js Upon Click Event to Add a New Value

I currently have a code snippet that looks like the following: arr = [ { val1: a, val2: b }, { val1: a, val2: b }, { val1: a, val2: b } ] <div v-for="single in arr"> <button v-on:click="addSome"></button> </div> When I c ...

Guide to using AngularJS to navigate to the previous route after successful login

With the implementation of $rootScope.$on('$routeChangeStart', function(event, next, current), I've been able to successfully redirect to the signin page when authentication is required. Now, I'm trying to figure out the best way to re ...

Shorten Text - React Native

I currently have a React Native application with a FlatList component. The logic I initially implemented was to display an Expand/Collapse arrow whenever the content at the 100th position in the list is not empty. However, I now realize that this approach ...

After making 5 Ajax get requests, there is no response being received

Currently, I'm facing an issue when trying to retrieve information from the MongoDB server to the frontend using an AJAX GET request. Everything works smoothly until I attempt to call the JavaScript function multiple times. Strangely, if I call the fu ...

Limit DerbyJS to re-rendering specific DOM elements

Currently, DerbyJS (visit http://derbyjs.com) functions by replacing everything in the body tag of the document each time a link is clicked. Is there a way to utilize the template, but replace only the content inside #main-content instead of refreshing th ...

Combining JSON objects in Node.js

I am extracting data from my database and converting it to JSON format. However, I now want to merge all the JSON data into a single JSON object. I have attempted various methods, but due to my limited knowledge of JavaScript syntax, I have not been able ...

A novel RxJS5 operator, resembling `.combineLatest`, yet triggers whenever an individual observable emits

I am searching for a solution to merge multiple Observables into a flattened tuple containing scalar values. This functionality is similar to .combineLatest(), but with the added feature that it should emit a new value tuple even if one of the source obser ...

Building a Node.js authentication system for secure logins

Just diving into node.js and trying to create a user login system, but encountering an error when registering a new user: MongoDB Connected (node:12592) UnhandledPromiseRejectionWarning: TypeError: user is not a constructor at User.findOne.then.user ...

Steps for integrating HLS video service with Vue3.js single page application

As I work on developing a video streaming platform using Vue.js, one particular challenge has come to my attention. When utilizing single-page application (SPA) frameworks like Vue.js, JavaScript code runs on the client's browser. This means that segm ...

"Utilizing multiple optional parameters in Expressjs can lead to the request handler being

Hey there, I could use a fresh perspective on this issue I'm having. I am attempting to set up a request handler that can accept 0, 1, or 2 parameters like http://localhost:3000/{seed}/{size}. The parameters "seed" and "size" should both be optional. ...

Deactivating and activating an HTML input button

So I was tinkering with this cool button: <input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/> I've been wondering, how can I conveniently control its state of being disabled or enabled? Initially, I attem ...

Get information that has been uploaded using ajax

I need help with my code for sending data via ajax to an update.php page. $(document).ready(function() { $("#modify").click(function() { var a = $("#a").val(); var b = $("#b").val(); var c = $("#c").val(); $.ajax({ type: "POST", ...

Unable to assign a scroll event delegation by using the "on" method

When attempting to delegate a scroll event in order for my element to maintain the same handler after being returned by an ajax call, I utilized the on method for delegation. $('body').on({ scroll:function(){ alert('scrolling&ap ...