3

I have tried a lot but I am not able to get endpoint response mapped to my model. I am using HttpClient and Angular4. I got data back from service but it is not mapped correctly to my model class.

I have following JSON which service is Returning: 

{
    "result": [
        {
            "id": "1",
            "type": "User",
            "contactinfo": {
                "zipcode": 1111,
                "name": "username"
            }
        }
    ]
}

I have created a model in typescript which I will like to map to json response: 

export interface result {
            zipcode: number;
            name: string;
}

This is how i call JSON endpoint. 

result : string[] = [];

constructor(private http: HttpClient) {    }

public getList(): result[] {
        this.http.get<result[]>('url...', { headers: this.headers }).subscribe(

            data => {
             // 1. Data is returned - Working
                console.log('data: ' + data); 
                this.result= data;

                // This is the problem. My data is not mapped to my model. If I do following a null is returned
                console.log('data mapped: ' + this.result[0].name);
            },
            (err: HttpErrorResponse) => {
    // log error
            }
        );

        return this.result;
    }
user2480218
  • 61
  • 1
  • 1
  • 7
  • 1
    your interface is wrong. where are the missing properties `id,type,contact info` – Aravind Jan 16 '18 at 08:58
  • I only need zipcode and name that why I have created a interface with only those fields. Should Interface contains all the fields which exists in JSON? – user2480218 Jan 16 '18 at 09:51

2 Answers2

12

You need to import the interface in your component,

import { result } from '.result';

Your interface should look like,

interface RootObject {
  result: Result[];
}

interface Result {
  id: string;
  type: string;
  contactinfo: Contactinfo;
}

interface Contactinfo {
  zipcode: number;
  name: string;
}

and change the type of result as,

result : result;

and assign the result as,

this.result = data;

You can use http://www.jsontots.com/ to create the interface based on JSON

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • Same problem. data.result.contactInfo is undefinded. – user2480218 Jan 16 '18 at 09:54
  • Now it is working. It did help me to create the model from jsontots.com. The code which fixed it was this: this.http.get(url,{ headers: myheaders}).subscribe(data => {console.log('data: ' + JSON.stringify(data.Result[0].contactInfo.name) ); } – user2480218 Jan 16 '18 at 12:43
  • Is there a reason to use interfaces instead of classes in this case? – NobodySomewhere Aug 27 '20 at 12:26
0

your "data" is an Object, with a property "result". result[] has a property called "contactInfo". in contactInfo you have the data you want, so 

//you have no model, so NOT get<result[]>
this.http.get('url...', { headers: this.headers }).subscribe(
            data => {
                this.result= data.result[0].contactInfo;
            }
Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • I tried with your input but data.result.contactInfo is giving error. data.result.contactInfo is undefinded. – user2480218 Jan 16 '18 at 09:53
  • @user2480218, sorry, I update my answer, result is an array. anyway check with console.log(data) the value of data. – Eliseo Jan 16 '18 at 09:57
  • I could not get it to work when I removed get<..Object>. This resulted still in undefined. – user2480218 Jan 16 '18 at 12:44
  • sorry again is **data.result[0].contactinfo** . I've just probe. But it's not magic. you only need make a console.log(data), console.log(data.result), console.log(data.result[0]) and console.log(data.result[0].contactinfo to see your data – Eliseo Jan 16 '18 at 15:39