Скачать или смотреть How to Filter Axios Responses in TypeScript: Returning Only the Necessary Props

Learn how to streamline your API response in TypeScript with Axios by filtering out unnecessary data and returning only the desired properties from your requests.
---
This video is based on the question https://stackoverflow.com/q/72341009/ asked by the user 'Samy Kacimi' ( https://stackoverflow.com/u/4701098/ ) and on the answer https://stackoverflow.com/a/72341240/ provided by the user 'Damian Green' ( https://stackoverflow.com/u/1801403/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Axios & Typescript: Return array object with only the props specified

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Filter Axios Responses in TypeScript: Returning Only the Necessary Props

When developing applications that interact with APIs, it's common to face the challenge of handling excessive amounts of data in the responses. In particular, working with ERC20 tokens and similar APIs can lead to receiving a whole host of information, much of which you may not need. In this guide, we will delve into a scenario where we want to fetch token balances using Axios and TypeScript, specifically focusing on how to filter the response to include only the properties we're interested in.

The Problem

You might be using a service like Etherscan to fetch token balances for a wallet address, but the response you receive contains more data than expected. For example, when you query the API, the response might include various fields such as transaction history or token decimals, but you might only want specific details like:

contractAddress

tokenName

tokenSymbol

The challenge arises when you want to limit the output to just these three properties while using Axios in a TypeScript environment. Let's explore how you can achieve this effectively.

The Solution

To filter the API response and only return the required properties, you can modify the function where you process the Axios response. Here is how to do it step-by-step:

Step 1: Set Up Your Types

First, ensure you have a TypeScript type that defines the structure of your token object:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Modify the API Call

When you receive the response from the Axios request, the goal is to map through the data and extract only the necessary properties. Here's how you can achieve that by modifying the existing getTokens function:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Integration with Your API

The last step involves making sure that the filtered tokens are returned correctly through your API endpoint. Here's how to integrate the modified getTokens function into your existing API handler:

[[See Video to Reveal this Text or Code Snippet]]

This structure will ensure that only the necessary data is sent back in your API responses.

Conclusion

Filtering out unwanted properties in an Axios response when using TypeScript does not have to be complex. By using JavaScript’s map() function, you can easily restructure your data to meet your application’s needs.

By implementing these changes, you ensure that your API remains efficient and lightweight, delivering only the most relevant information without the clutter of excess data. Happy coding!