Assigning unique identifiers to the data retrieved from Promise.all

Question

Assigning unique identifiers to the data retrieved from Promise.all

I'm currently facing an issue with handling promises in my code - specifically, the Promises returned are not correctly mapped to the utteranceId as desired. I want to ensure that the ids are preserved for the data being returned. Even after using Object.entries(utteranceObject) to wrap my object.

When I log keyValue after applying

Object.entries(utteranceObject).map(keyValue)

, the data appears to be formatted correctly as [id, url]. How should it be formatted when passing to Promise.all()?


const getUtterancesAudio = async (
 utterances: { utteranceId: string, interviewId: string }[]): Promise<void> => {
const config = useRuntimeConfig();

const mapped = utterances.map((u) => {
return { id: u.utteranceId, url: `${config.public.apiBase}/utterance/182bd8fe-f57d- 
4595-b8d7-649ff8ca6d62/interview/665a799a-883b-4b20-9460-3eee486516a8/audio` };
});

const flatten = mapped.map(Object.values);
const forPromisesEntries = Object.fromEntries(flatten);
const getResults = await createPromises(forPromisesEntries);
};



const createPromises = async (utteranceObject: Record<string, string>): 
 Promise<unknown> => {
 const promises = Object.entries(utteranceObject).map(keyValue => 

 buildAudioFetchRequests(keyValue[0], keyValue[1]));

   return Promise.all(promises);
};


const buildAudioFetchRequests = async (key: string, url: string): Promise<unknown> => 
{
 return [key, useAuthenticatedFetch(url, { initialCache: false }]);
};

typescript promise fetch

Answer 1

Answer №1

In my opinion, there is potential to significantly simplify the code. From what I gather, the original poster starts with an array of utterance IDs structured like this:

[ { utteranceId: '123' }, { utteranceId: '456' }, ...

The desired outcome is to generate a result resembling this:

[ { id: '123', result: 'result of api call for 123' }, ...

To begin, create a function that constructs the desired object by invoking the API and linking the response with the input parameter as shown below...

const fetchUtterance = async (id: string, url:string):Promise<unknown> => {
  let response = await useAuthenticatedFetch(url, { initialCache: false });
  return { id, response };  // highlight lies here
}

Simply iterate over the array of utterance IDs to call this function and receive an array of promises. Then, await all promises using all()...

const getUtterancesAudio = async (utterances) => {
    const config = useRuntimeConfig();
    const basePath = '/utterance/182bd8fe-f57d-4595-b8d7-649ff8ca6d62/interview/665a799a-883b-4b20-9460-3eee486516a8/audio';
  
    const promises = utterances.map((u) => {
      return fetchUtteranceID(u.utteranceId, `${config.public.apiBase}${basePath}`);
    });
  
    const results = await Promise.all(promises);
    console.log(results);
};

Answer 2

In my opinion, there is potential to significantly simplify the code. From what I gather, the original poster starts with an array of utterance IDs structured like this:

[ { utteranceId: '123' }, { utteranceId: '456' }, ...

The desired outcome is to generate a result resembling this:

[ { id: '123', result: 'result of api call for 123' }, ...

To begin, create a function that constructs the desired object by invoking the API and linking the response with the input parameter as shown below...

const fetchUtterance = async (id: string, url:string):Promise<unknown> => {
  let response = await useAuthenticatedFetch(url, { initialCache: false });
  return { id, response };  // highlight lies here
}

Simply iterate over the array of utterance IDs to call this function and receive an array of promises. Then, await all promises using all()...

const getUtterancesAudio = async (utterances) => {
    const config = useRuntimeConfig();
    const basePath = '/utterance/182bd8fe-f57d-4595-b8d7-649ff8ca6d62/interview/665a799a-883b-4b20-9460-3eee486516a8/audio';
  
    const promises = utterances.map((u) => {
      return fetchUtteranceID(u.utteranceId, `${config.public.apiBase}${basePath}`);
    });
  
    const results = await Promise.all(promises);
    console.log(results);
};

Assigning unique identifiers to the data retrieved from Promise.all

Answer №1

Similar questions

Is it possible for a class that implements an interface to have additional fields not defined in the parent interface?

What is the best way to ensure that a specific data type is used for a key in an object?

Ways to populate missing cells with a default hyphen symbol

What is the reasoning behind Typescript's belief that the symbol 'name' is consistently present?

Incompatible TypeScript function declarations

Validating a field conditionally upon submission

"Protractor encountered an issue when navigating to the most up-to-date Angular section in our

Utilize environment.ts in Angular library module for importation purposes

Tips for using the arrow keys to navigate the cursor/caret within an input field

Decorator used in identifying the superclass in Typescript

What is the reason behind angular 4.3's httpclient returning Object instead of any?

Executing ts-node scripts that leverage imported CSS modules

Retrieve the keys of a type by analyzing one of its values

When using nodejs with sqlite3, the first callback parameter returns the class instance. How can this be resolved in order to prevent any issues?

Running promises in sequence with Node.js

Conceal pagination when printing - utilizing primeng table

How can we use fetch to grab some data?

I encountered some problems with conflicting Angular dependencies, so I decided to delete the node_modules folder

Getting a "function is not defined" error in Angular 6 while using it within a nested function

Select all entities in TypeORM except for the ones where the id is not equal to a specific condition