2016-07-12 2 views
1

im versuchen, einige json über HTTP-Client zu laden, aber wenn es um die Sicht kommt bekomme ich immer diese Fehlermeldung:Ionic2 Ngfor unterstützt nur Array

NgFor only supports binding to Iterables such as Arrays 

Wenn ich am console.log Ausgang aussehen ich sehe, dass es ist ein Objekt mit anderen Objekten darin. enter image description here

Das ist mein Service-Code:

@Injectable() 
export class DataService { 
    data: any; 

    constructor(private http: Http) { 
    this.data = null; 
    } 

    load() { 

     // We're using Angular Http provider to request the data, 
     // then on the response it'll map the JSON data to a parsed JS object. 
     // Next we process the data and resolve the promise with the new data. 
    return this.http.get('http://localhost:3000/db') //json url 
     .map(res => res); 
    } 
} 

mein page.ts Konstruktor Dann, wo die Daten geladen:

constructor(private nav:NavController, navParams:NavParams, http:Http, public service:DataService) { 
     this.service.load().subscribe (
      response => { 
       this.displayData=response; 
       console.log(this.displayData); 
      }, 
      error => console.log ('error in download') 
     ); 
} 

Mein seite.html ngfor:

<ion-card *ngFor="let data of displayData"> 
</ion-card> 

Und endlich mein json von der localhost url:

{ 
    "0": { 
    "title": "Erreichbarkeit", 
    "items": [ 
     { 
     "name": "1", 
     "value": "a" 
     }, 
     { 
     "name": "2", 
     "value": "b" 
     }, 
     { 
     "name": "3", 
     "value": "c" 
     } 
    ] 
    }, 
    "1": { 
    "title": "Erreichbarkeit 2", 
    "items": [ 
     { 
     "name": "1", 
     "value": "g" 
     }, 
     { 
     "name": "2", 
     "value": "f" 
     }, 
     { 
     "name": "3", 
     "value": "e" 
     } 
    ] 
    } 
} 

Hoffe jemand weiß, was falsch ist, weil dies mich verrückt macht.

+0

Dies sieht nicht aus wie ein Array. Wie bauen Sie es auf Ihrer Serverseite auf? – rinukkusu

+0

Ihr Json sollte '[{" title ": ...}, {" title ": ...}]' sein, weil es im Moment kein 'Array' ist, sondern ein' Objekt' mit zwei 'Eigenschaften' genannt * 0 * und * 1 * – sebaferreras

+0

es ist eine einfache JSON-Datei – Zero

Antwort

4

Ihre Json sollten [{"title" : ...}, {"title": ...}] sein, weil gerade jetzt, es ist nicht ein Array sondern eine Objekt mit zwei Eigenschaften genannt und . Haben Sie versuchen, mit der Json wie folgt zu ändern:

[ 
    { 
    "title": "Erreichbarkeit", 
    "items": [ 
     { 
     "name": "1", 
     "value": "a" 
     }, 
     { 
     "name": "2", 
     "value": "b" 
     }, 
     { 
     "name": "3", 
     "value": "c" 
     } 
    ] 
    }, 
    { 
    "title": "Erreichbarkeit 2", 
    "items": [ 
     { 
     "name": "1", 
     "value": "g" 
     }, 
     { 
     "name": "2", 
     "value": "f" 
     }, 
     { 
     "name": "3", 
     "value": "e" 
     } 
    ] 
    } 
] 

Und jetzt in der Ansicht:

<ion-card *ngFor="let data of displayData"> 

    <ion-card-header>{{data.title}}</ion-card-header> 

    <ion-card-content > 
     <p *ngFor="let item of data.items">{{item.name}} : {{item.value}}</p> 
    </ion-card-content> 

</ion-card> 
+1

Vielen Dank, das war mein Problem. Dieses ganz neue eckige, ionische, json Ding ist neu für mich ... – Zero

+1

Froh, hilfreich zu sein. Das sind ziemlich aufregende Technologien, also viel Spaß mit ihnen :) – sebaferreras