HTTP Get Anfrage Einzelobjekt Ionic 2

Question

Ich benutze eine API, um Daten zu ziehen, die dann auf die Seite gedruckt wird, ich habe es erfolgreich für eine JSON-Antwort von mehr als 1 Objekt arbeiten, wie dies durch ein Parts analysiert " Hierarchie. Wenn ich das für ein Objekt mache, kann ich es nicht ausdrucken.

Die Json ich habe zu arbeiten und bereits ausdrucken können ist

und Code, der

<ion-content> 
    <ion-list> 
     <ion-item *ngFor="let item of api" [navPush] = "detailsPage" detail-push> 
      <div class="thumb"> 
       <img src="{{item.smallImageUrls}}"> 
      </div> 
      <div class="text"> 
       <div class="title"> 
        <h1>{{item.recipeName}}</h1> 
       </div> 
       <div class="rating"> 
        <rating [(ngModel)]="item.rating"></rating> 
       </div> 
       <div class="time"> 
        <p>{{item.totalTimeInSeconds | HoursMinutesSeconds}} minutes</p> 
       </div> 
       <div class="ingredients"> 
        <p>{{item.ingredients.length}} Ingredients</p> 
       </div> 

       <div class="course"> 
        <p>{{item.attributes.course}} </p> 
       </div> 

      </div> 
     </ion-item> 
    </ion-list> 
</ion-content> 

Typoskript

this.http.get('http://api.yummly.com/v1/api/recipes?_app_id=397aed16&_app_key=69e2565adcec7a6609b18bef31261e62') 
     .map(res => res.json()) 
     .subscribe(data => { 
     // we've got back the raw data, now generate the core schedule data 
     // and save the data for later reference 
     console.log(data); 
     this.listing = data.matches; 
     resolve(this.listing); 
     }); 

Json arbeitet und auf

stecken

meine Anfrage ist

this.http.get('mylink.co.uk') 
    .map(res => res.json()) 
    .subscribe(data => { 
    console.log(data); 
    this.details = data; 
    resolve(this.details); 
    }); 

und Winkel {{attribution}}

zu sein, wenn jemand darauf hinweisen könnte, wo ich falsch werde das wäre toll

Answer 1

Sie sollten verwenden any [] zu typecast zu einem Datenfeld

this.http.get('mylink.co.uk') 
    .map((response: Response) => <any[]>response.json()) 
    .subscribe(data => { 
    console.log(data); 
    this.details = data; 
    resolve(this.details); 
    }); 

Update 1:

Sie sollten eine Schnittstelle und erstellen die entsprechenden Eigenschaften und binden sie an das Ergebnis verwenden, der

export interface Reciepe { 

    criteria: Criteria; 
    matches: Matches; 
    faceCounts: any; 
    totalMatchCount: number; 
    attribution: Attributes; 
} 

export interface Criteria { 

    q: any; 
    allowedIngredient: any; 
    excludedIngredient: any; 
} 

export interface Matches { 
    imageUrlsBySize: ImageUrlsBySize; 
    sourceDisplayName: string; 
    ingredients: string[]; 
    smallImageUrls: string[]; 
    recipeName: string; 
    totalTimeInSeconds: number; 
    attributes: Attributes; 
    flavors: any; 
    rating: number; 
} 

export interface Attribution { 
    html: string; 
    url: string; 
    text: string; 
    logo: string; 

} 
export interface ImageUrlsBySize { 

    90: string; 

} 
export interface Attributes { 
    course: string[]; 
} 

Ihr Typoskript Code

durch die API-Schnittstelle zurückgegeben wird, sollte sollte geändert werden als

this.http.get('mylink.co.uk') 
    .map((response: Response) => <Reciepe>response.json()) 
    .subscribe(data => { 
    console.log(data); 
    this.details = data; 
    resolve(this.details); 
    });