How to set datatype for response json data in angular2

Question

Am new for angular2, i'm http.get("url") method get json type data, how to set typescript datatype(below see-(this is part of response data))in angular2 object.

this is part of response data:

{
"items":[
{
"aliases":[
"http://www.xyz.in",
"http://facebook.xyz.in"
],
"styling":{
"tag_background_color":"#E0EAF1",
"tag_foreground_color":"#3E6D8E",
"link_color":"#0077CC"
},
"related_sites":[
{
"relation":"meta",
"api_site_parameter":"meta.xyz",
"site_url":"http://met.xyz.in"

},
{
"relation":"chat",
"name":"Stack Overflow Chat"
}
],
"markdown_extensions":[
"Prettify"
],
"launch_date":1221436800,
"closed_beta_date":1217462400,
"site_state":"normal",
"favicon_url":"https://cdn.sstatic.net/Sites/xyz/img/favicon.ico",
"name":"Stack Overflow",
"site_type":"main_site"
}]}

i have create to:

import {Related_sites,Styling} from "./all_type1";
    import {Injectable} from "@angular/core";
    export interface Items{
        aliases:any;
        styling:Styling[];    
        related_sites:Related_sites[]; 
        markdown_extensions:any;
        launch_date: number;
        closed_beta_date: number;
        site_state: string;
        favicon_url: string;
        name: string;
        site_type: string;}

and

export interface Styling {
    tag_background_color: string;
    tag_foreground_color: string;
    link_color: string;
}
export interface Related_sites{
     related_sites:[
        {
        relation:string;
        api_site_parameter:string;
        site_url:string;
    },
    {
        relation:string;
        name:string;

    }]
}

is this the right way or not?? any one help...

It depends on what you expect. as Items[] only tells the IDE that it is safe to assume that data is Items[], but it doesn't have any effect before runtime if it isn't. At runtime it will cause an error when that data actually doesn't conform to the interface. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 18, 2017 at 8:35
@GünterZöchbauer, i didnt get error , i cant able to set it in typescript class(pojo) ,i dont know whether the structure of typescript is wrong or pushing data into typescript. — suresh t
– suresh t, Commented Jan 18, 2017 at 9:55

AVJT82 · Accepted Answer · 2017-01-18 10:49:47Z

1

You need to change the following in your service

.then(response =>response.json().data as Items[])

to:

.then(response =>response.json() as Items[])

then it should work fine, at least when I tested it :)

and since you didn't provide what is going on in your component, so let's add that here:

    this.myService.getItemData()
        .then(data => {
            this.items = data
     })

answered Jan 18, 2017 at 10:49

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

1 Comment

AVJT82 Over a year ago

Did this answer help you?

Collectives™ on Stack Overflow

How to set datatype for response json data in angular2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related