how to map json with typescript interface?

Question

i have response from backendthat i am trying to map it to interface but its always throws interface properties undefined like in below case Envelop always coming undefined. Any idea what is implemented wrong here ?

interface.ts

export interface IResult {
    Envelop: Envelope;
}

export interface Envelope {
    $: $;
    Header: string;
    Body: Body;
}
export interface $ {
    "xmlns:soapenv": string;
}

export interface Body {
    "trk:TrackResponse": TrackShipment;
}

main.ts

public after(data: IResult){

        const result = data.Envelop.Body
        const response: any = result;
        return response;
    }

Json data from backend

"soapenv:Envelope": {
     "$": {
         "xmlns:soapenv": "http"
     },
     "soapenv:Header": "",
     "soapenv:Body": {
         "some test Data"
     }
 }

In your 'after' function, log out the data object. What keys exist on that object? It seems like the property Envelop doesn't exist on the data object. I would think this line: const result = data.Envelop.Body should look more like: const result = data['soapenv:Envelope']; — jack
– jack, Commented Aug 2, 2018 at 16:28
Your Envelop, Header and Body interface properties don't match the keys in the returned JSON. — Joseph Webber
– Joseph Webber, Commented Aug 2, 2018 at 16:31
Also, just FYI "soapenv:Body": { "some test Data" } is not valid json. It should be a key, value pair. — jack
– jack, Commented Aug 2, 2018 at 16:31
thats direct mapping to the data and i am getting the response by doing const result = data['soapenv:Envelope']; but i want to map it to interface and get it from there — hussain
– hussain, Commented Aug 2, 2018 at 16:32
"some test data" was just example i am getting undefined at first level Envelop can someone provide correct answer please — hussain
– hussain, Commented Aug 2, 2018 at 16:34

Joseph Webber · Accepted Answer · 2018-08-02 16:55:36Z

1

Given your response JSON, your interfaces should look like this

export interface IResult {
    "soapenv:Envelope": Envelope;
}
export interface Envelope {
    $: $;
    "soapenv:Header": string;
    "soapenv:Body": Body;
}
export interface $ {
    "xmlns:soapenv": string;
}
export interface Body {
    "trk:TrackResponse": TrackShipment;
}

Which you would then access like

public after(data: IResult) {
  const result: Body = data["soapenv:Envelope"]["soapenv:Body"];
  return result;
}

edited Aug 2, 2018 at 16:55

answered Aug 2, 2018 at 16:40

Joseph Webber

2,1731 gold badge21 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

hussain Over a year ago

How de we access that in the main.ts ?

hussain Over a year ago

can not find name Body , where its coming from ?

Joseph Webber Over a year ago

Body is the Body interface. If you don't have access to it in main.ts because it's in a different file, import it at the top. import { IResult, Body } from 'path/to/file';

hussain Over a year ago

i have imported the interface not sure its always throwing undefined on Body or any property i tried to map

Joseph Webber Over a year ago

What does your map look like?

|

Collectives™ on Stack Overflow

how to map json with typescript interface?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related