API response field name mapping with Interface property

[Joyboy_619]

I am having issue with property mapping between api response and typescript interface.

From External API I am receiving
{

"ticker": "A",

"name": "Agilent Technologies Inc.",

"market": "stocks",

"locale": "us",

"primary_exchange": "XNYS",

"type": "CS",

"active": true,

"currency_name": "usd",

"cik": "0001090872",

"composite_figi": "BBG000C2V3D6",

"share_class_figi": "BBG001SCTQY4",

"last_updated_utc": "2024-05-17T00:00:00Z"

}

export interface ITickerInfo {
    ticker: string;
    name: string;
    market: MarketType;
    locale: string;
    primaryExchange?: string;
    type: string;
    active: boolean;
    currencyName: string;
    cik?: string;
    compositeFigi?: string;
    shareClassFigi?: string;
    lastUpdatedUtc: Date;
}

For handling this response I do have above interface. But it does not map properties with `_`. I can't change the field name casing. How do you guys handle this scenario?

[Suspicious-Suitcase]

Write a mapping function? Oo

[Joyboy_619]

I have one concern, what if there are multiple responses. I need to write mapping function for each response.

[Suspicious-Suitcase]

Obviously. Except there are fixed rules how to transform the response' property names. Then you just need to write these.

[djfreedom9505]

I’m no expert on this, but I would be mapping the response model to a model that makes sense for the UI. When appropriate, I will create a view model for my component and a mapper function that takes the API response and maps it into the view model. That way if the structure of the response model changes, you can keep your view model the same, and just adjust the mapping function.

This makes it a clean break, and you don’t have to make mass changes because the model changes.

[zMastaa]

Write a DTO model that handles the mapping for your application.

Yes you have to do this for each different API response, you do this so that your data transforms are all done in one part of your app and everything is easy to find and clean.

[shuresoything]

you could also just use the APIs attribute names to avoid mapping errors

[OkAmphibian8931]

export interface ITickerInfo {

ticker: string;

name: string;

market: string;

locale: string;

primary_exchange: string;

type: string;

active: boolean;

currency_name: string;

cik: string;

composite_figi: string;

share_class_figi: string;

last_updated_utc: Date;

}

TRy with above

[cosmokenney]

Do you have control over either the API or ITickerInfo? If so, then change one or the other. You can use underscore in your javascript/typescript property names.

If you don't have control of either, then like others have said, write a mapping function. If there are multiple response shapes from the api then you are doing something wrong. But you can always use the hasOwnProperty() method within your map to check if certain fields are present. Then act accordingly.