Transform a Promise of string array into a regular string array

Question

Transform a Promise of string array into a regular string array

I have a function called fetchSavedCards that retrieves a list of saved cards. The function returns a Promise Object, but I want to convert it into an array of strings and return it. Is this possible?

const fetchSavedCards = (): string[] => {
return fetch("/fetchSavedCards")
    .catch((error: Error) => {
        throw new Error(error.message);
    })
    .then((response) => {
        return response.json();
    })
    .then((cards: string[]) => {
        return cards;
    });

};

After retrieving the result set, I need to display it on a web page. However, I've encountered an issue where the .map() function does not work with a Promise object.

    <CardContent>
    <label> Card Selection  </label>
    <div className="container" id="cards">
        {Service.fetchSavedCards().map(
            (card) => <label>
                <input type="radio" name="selectedCard" value="test" onChange={this.handleCardSelectionChange}/>
                    {card}
            </label>)}
    </div>
    ...
</CardContent>

typescript promise

Answer 1

Answer №1

Attempting to convert an async function into a synchronous one is not advisable and simply cannot be done. It seems like you may be struggling with using fetchSavedCards correctly after defining it as shown below.

const fetchSavedCards = (): Promise<string[]> => {
  return fetch("/fetchSavedCards")
    .then((response) => {
        return response.json();
    })
    .then((cards: string[]) => {
        return cards;
    })
    .catch((error: Error) => {
        throw new Error(error.message);
    });
};

// How to properly use fetchSavedCards
fetchSavedCards().then(cards => handleCards(cards));

By the way, it's recommended to place the .catch() at the end of your promise chain.

If you intend to utilize this data for rendering views in React, consider storing the retrieved data in the component's state and rendering based on that state.

Here is a full example using React hooks:


const fetchSavedCards = (): Promise<string[]> => {
  return fetch('/fetchSavedCards')
    .then(response => {
      return response.json()
    })
    .then((cards: string[]) => {
      return cards
    })
    .catch((error: Error) => {
      throw new Error(error.message)
    })
}

function Cards() {
  const [cards, setCards] = useState<string[]>([])

  useEffect(() => {
    fetchSavedCards().then(cards => setCards(cards))
  }, [])

  return (
    <CardContent>
      <label> Card Selection </label>
      <div className="container" id="cards">
        {cards.map(card => (
          <label>
            <input
              type="radio"
              name="selectedCard"
              value="test"
              onChange={this.handleCardSelectionChange}
            />
            {card}
          </label>
        ))}
      </div>
      ...
    </CardContent>
  )
}

Answer 2

Attempting to convert an async function into a synchronous one is not advisable and simply cannot be done. It seems like you may be struggling with using fetchSavedCards correctly after defining it as shown below.

const fetchSavedCards = (): Promise<string[]> => {
  return fetch("/fetchSavedCards")
    .then((response) => {
        return response.json();
    })
    .then((cards: string[]) => {
        return cards;
    })
    .catch((error: Error) => {
        throw new Error(error.message);
    });
};

// How to properly use fetchSavedCards
fetchSavedCards().then(cards => handleCards(cards));

By the way, it's recommended to place the .catch() at the end of your promise chain.

If you intend to utilize this data for rendering views in React, consider storing the retrieved data in the component's state and rendering based on that state.

Here is a full example using React hooks:


const fetchSavedCards = (): Promise<string[]> => {
  return fetch('/fetchSavedCards')
    .then(response => {
      return response.json()
    })
    .then((cards: string[]) => {
      return cards
    })
    .catch((error: Error) => {
      throw new Error(error.message)
    })
}

function Cards() {
  const [cards, setCards] = useState<string[]>([])

  useEffect(() => {
    fetchSavedCards().then(cards => setCards(cards))
  }, [])

  return (
    <CardContent>
      <label> Card Selection </label>
      <div className="container" id="cards">
        {cards.map(card => (
          <label>
            <input
              type="radio"
              name="selectedCard"
              value="test"
              onChange={this.handleCardSelectionChange}
            />
            {card}
          </label>
        ))}
      </div>
      ...
    </CardContent>
  )
}

Answer 3

Answer №2

It is indeed possible to do this. Let's delve into it further:

function retrieveSavedCards(): string[] {
  const result: string[] = [];

  fetch("/retrieveSavedCards")
    .catch((error: Error) => {
        throw new Error(error.message);
    })
    .then((response) => {
        return response.json();
    })
    .then((cards: string[]) => {
        result.length = 0;
        cards.forEach((item, i) => {
          result[i] = item;
        });
    });

  return result;
}

You have the option to immediately return the incomplete result array and then await the promise resolution before populating result asynchronously. But does this approach align with your intended solution?

We would appreciate it if you could provide more context on the specific issue you are facing.

Answer 4

It is indeed possible to do this. Let's delve into it further:

function retrieveSavedCards(): string[] {
  const result: string[] = [];

  fetch("/retrieveSavedCards")
    .catch((error: Error) => {
        throw new Error(error.message);
    })
    .then((response) => {
        return response.json();
    })
    .then((cards: string[]) => {
        result.length = 0;
        cards.forEach((item, i) => {
          result[i] = item;
        });
    });

  return result;
}

You have the option to immediately return the incomplete result array and then await the promise resolution before populating result asynchronously. But does this approach align with your intended solution?

We would appreciate it if you could provide more context on the specific issue you are facing.

Answer 5

Answer №3

Recently, I encountered a similar problem and came up with this solution to address it:

export type UnpackPromise<T> = T extends {
    then(onfulfilled?: (value: infer U) => unknown): unknown;
} ? U : never;

This approach combines elements of generics, conditional types, and infer.

In your specific scenario, I recommend using the ReturnType Utility for the function and applying the UnpackPromise type to the result.

Answer 6

Recently, I encountered a similar problem and came up with this solution to address it:

export type UnpackPromise<T> = T extends {
    then(onfulfilled?: (value: infer U) => unknown): unknown;
} ? U : never;

This approach combines elements of generics, conditional types, and infer.

In your specific scenario, I recommend using the ReturnType Utility for the function and applying the UnpackPromise type to the result.

Transform a Promise of string array into a regular string array

Answer №1

Answer №2

Answer №3

Similar questions

Incorporating Google Pay functionality within Angular applications

Guide to sorting through an array for a particular keyword

When conducting tests in Nest.js, it appears that the dependencies of ReportingService, specifically MasterMLRepository, cannot be resolved. This issue is likely due to Sequelize not being available in

React with TypeScript presents an unusual "Unexpected token parsing error"

What is the best way to assign a type based on a variadic type in TypeScript?

Ensuring a precise data type in a class or object using TypeScript

Struggling to retrieve dataset from Bootstrap 5 form while using Angular

Querying data from a promise and embedding it in a JSON object in AngularJS

Is it Observable or Not? Typescript Typehint helping you determine

Error: Could not find module: Unable to locate 'rxjs/add/observable/throw' in 'D:AngularhttpErrorHandlingExamplesrcapp'

Navigation arrows for sliding`

When using PrimeNG's InputOtp component, users are unable to modify the values of input fields

Automatically compile files while performing an npm install or update

It appears that using JQuery's .when and .done functions may result in the code executing before the script has finished loading

Explain a category of instance used in a template parameter

Use the Express application as an argument for the http.createServer function

Form a tree structure using a compressed object

Found a minor syntax problem in an Angular service related to error handling declaration

What advantages could learning ReactJS first give me before diving into NextJS?

Create an Angular 2 webpack production project and ensure that the dist folder does not contain any source code