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

Triggering a dynamically created event with the onchange event

I'm currently working on creating an input type file, and here is the code I have: var element = document.createElement("INPUT"); element.type = "file"; element.id = "element" + i; $("#media").append("<br>"); $("#media").append("<br>"); $ ...

Modifying specific attributes of an object within the $scope: A step-by-step guide

When working with Angular, if you have code in the view that looks like this: <span ng-model="foo.bar1"></span> <span ng-model="foo.bar2"></span> <span ng-model="foo.bar3"></span> Due to how Angular maps objects, you c ...

Vue: Issue with reusability when calling a component with varying arguments numerous times

I am facing an issue where I need to render the same component multiple times with different parameters. I have two objects, and based on the type provided, I want to display either a text input or a numeric input. When I try to call the component twice wi ...

The volume control does not work on Howler.js for iOS devices

In my Meteor React App, I have made some modifications to the React Howler plugin in order to play two audio tracks simultaneously. I have also added a crossfader feature to adjust the volume of both tracks at the same time. This functionality works perfec ...

Step by step guide on serializing two forms and an entire table

I have been attempting to serialize data from two forms and the entire table simultaneously. While the form data is successfully serialized, I am encountering difficulty in serializing the table records as well. Below is the code snippet of what I have att ...

angular: setting default selected items in dynamically generated options

After looking at the example provided here, I noticed that all three select options have the same value. How can I ensure that each option has a different selected value? This is what I currently have: <li ng-repeat="tarea in tareas"> <inp ...

Learn the art of animating "basic jQuery filtering" exclusively with CSS

Does anyone have suggestions on how to animate elements when filtered by JavaScript? The code I've tried so far doesn't seem to be working. Here's what I currently have: http://jsfiddle.net/ejkim2000/J7TF4/ $("#ourHolder").css("animation", ...

Learn how to dynamically import external modules or plugins using the import() functionality of TypeScript 2.4 within the production script generated by Angular CLI

Utilizing the typescript 2.4 [import()][1] feature has proven to be effective for dynamically loading modules. Testing this functionality has shown positive results, especially when importing modules and components located within the same directory. Howev ...

Rendering an array of objects in React

Struggling to display the products array on my page, nothing seems to be showing up. I've experimented with rendering simpler elements like li and it worked fine, but when it comes to more complex content, I'm hitting a roadblock constructor(pro ...

Interactive data visualization with hover-over details

I am utilizing datamaps to showcase the countries of the world, however, I want the graph to be centered. The issue arises when I hover over a country and the pop up appears all the way to the left, aligned with where the country would be if it wasn't ...

What is the best way to retrieve the current CSS width of a Vue component within a flexbox layout grid after it has been modified?

There's something about this Vue lifecycle that has me scratching my head. Let me simplify it as best I can. I've got a custom button component whose size is controlled by a flex grid container setup like this: <template> < ...

Prevent Nuxt from refreshing the page when the URL is modified

Currently, I am in the process of transitioning an application to Nuxt3 and encountering an issue regarding page reloading when the URL changes. Within my application, I have multiple links that all lead to the same page. To address this issue, I had to ma ...

The debate between client-side and server-side video encoding

My knowledge on this topic is quite limited and my Google search didn't provide any clear answers. While reading through this article, the author mentions: In most video workflows, there is usually a transcoding server or serverless cloud function ...

Reading data from Firestore in Next.js

I came across a Next.js starter that retrieves data from Firestore v9, but it only displays the data after a click event. How can I modify this code in Next.js to automatically show the data without needing to click? import { db } from '@/lib/firebase ...

Tips for verifying login credentials with MongoDB and Express: Leveraging db.collection().findOne() or .find() functions

I am encountering an issue with a POST request involving user credentials being sent from a Login page to the API Server. The code looks like this: loginUser(creds) { //creds is in the form of { username: bob, password: 123 } var request = { ...

The angular-ui-router component fails to update the ng-model data when the input text is changed, unless it is

The issue at hand involves ui-router 0.2.0 and angular 1.1.x, where ng-model does not accept changes to certain input fields such as text, checkbox, and select dropdowns. Interestingly, inputs within an ng-repeat function correctly. Upon initial loading o ...

What is the best way to display an HTML page located in a subfolder with its own unique stylesheets and scripts using Express and Node?

I am looking to display an HTML page that is located within a subfolder along with its own unique style-sheets and scripts. I am using Express and Node for this purpose, and have already acquired a separate login page that I would like to render in a sim ...

Next.js, Knex, and SWR: Unusual issue disrupting queries

When making API requests using Next API routes and interacting with Knex + MySQL, along with utilizing React and SWR for data fetching, I encountered a strange issue. If a request fails, my SQL queries start to append ", *" to the "select" statement, causi ...

Looking to verify a disabled select element and adjust the opacity of that element when it is disabled

$_product = $this->getProduct(); $_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes()); ?> <?php if ($_product->isSaleable() && count($_attributes)):?> <dl> <?php foreach($_attrib ...

Leveraging TypeScript to sort and extract specific elements from two arrays

Given two arrays, I am looking to identify the elements in array2 that match elements in array1 based on a specific property. The arrays are structured as follows: var array1 = [ {"myId": 1, "text": "a"}, {"myId& ...