Is it possible to extract JSON data using axios and TypeScript and convert it into a PascalCase model structure

Question

Is it possible to extract JSON data using axios and TypeScript and convert it into a PascalCase model structure

I have the following type:

export type Model = {
  Id: number,
  Name: string
}

and also a JSON response like this:

{"id": 0, "name": "User"}

.

When I parse that response using Axios (

const response = await Axios.get<Model>(source)

), I end up with the following object:

Id: undefined Name: undefined id: 0 name: "User"

How can I correctly parse the response to match the PascalCase model?

`

json typescript axios

Answer 1

Answer №1

To achieve this task, you have various options available but one crucial aspect to address is correcting the data types as they are currently inaccurate. Additionally, manual transformation of your result object is required.

Currently, the data types indicate that Axios.get will provide a model with keys named Id and Name, which is incorrect since it should actually return a model with keys named id and name. While you can convert the result accordingly, it is essential to rectify the initial return value information.

Once the data types are corrected, you can proceed to transform the JSON response into the desired model format. One approach is utilizing lodash, which simplifies this conversion process.

An illustrative example could be structured as follows:

export type Model = {
  Id: number,
  Name: string
}

// Obtain the raw response adhering to the accurate response type
const response = await Axios.get<{ id: number, name: string }>(source);

// Convert it into a new object aligning with the desired type
const model: Model = _.mapKeys(response,
  (value, key) => _.upperFirst(key) // Converting camelCase keys to PascalCase
);

Keep in mind that there are numerous alternatives for the final transformation step. The above example serves as just one potential solution. It may also be beneficial to consider implementing validation initially to ensure the response data conforms to your expectations, especially if there is a risk scenario involved.

Answer 2

To achieve this task, you have various options available but one crucial aspect to address is correcting the data types as they are currently inaccurate. Additionally, manual transformation of your result object is required.

Currently, the data types indicate that Axios.get will provide a model with keys named Id and Name, which is incorrect since it should actually return a model with keys named id and name. While you can convert the result accordingly, it is essential to rectify the initial return value information.

Once the data types are corrected, you can proceed to transform the JSON response into the desired model format. One approach is utilizing lodash, which simplifies this conversion process.

An illustrative example could be structured as follows:

export type Model = {
  Id: number,
  Name: string
}

// Obtain the raw response adhering to the accurate response type
const response = await Axios.get<{ id: number, name: string }>(source);

// Convert it into a new object aligning with the desired type
const model: Model = _.mapKeys(response,
  (value, key) => _.upperFirst(key) // Converting camelCase keys to PascalCase
);

Keep in mind that there are numerous alternatives for the final transformation step. The above example serves as just one potential solution. It may also be beneficial to consider implementing validation initially to ensure the response data conforms to your expectations, especially if there is a risk scenario involved.

Is it possible to extract JSON data using axios and TypeScript and convert it into a PascalCase model structure

Answer №1

Similar questions

Creating a rake migration file automatically for JSON data

Displaying webAPI response on TextView in Android

Concatenate a variable string with the JSON object key

Retrieve the HTML data from a form created with Angular

Combining various DTOs in a seamless manner for validation in TypeScript is made easy with the class-validator fusion technique

Tips for properly sending an array containing objects in JSON format using Swift for iOS development

Processing data on the server side using Dojo's Ajax functionality

Transforming Java objects into JSON using Jackson library

Unleashing the power of TypeScript with Solid JS Abstract Class

Resizing the elements within an iframe: Troubleshooting problems with embedding Bandcamp players

Combining identical data in JSON and PHP

Issue with the onClick event in next.js and TypeScript

Issues arise when attempting to use Axios and Express within a React App, resulting in a "Cannot POST /" error

Challenges with TypeScript's typeof operator and instantiation of classess

Error: An instance of the Java Long class cannot be deserialized from a START_ARRAY token

Parsing a datetime string without altering the format

Uniqueness in TypeScript tuples: ensuring no duplicates

Caution: The Vue Class Based Component is signalling that a property is not defined on the instance, yet it is being

Utilize Angular and a store to generate an HTTP request on the local db.json file

Unable to receive AJAX response for the GET request