bekommen json Daten in ein Array angular2

Question

Ich bin nicht sicher, was ich in meinem Code vermisse, aber derzeit bin ich keine Fehler angezeigt, wenn ich es ausführen, aber ich sehe auch nicht die Ergebnisse, die ich erwarte. Ich habe eine JSON-Datei, die ich in ein Array geladen habe und möchte dieses Array durchlaufen und Teile seiner Daten auf der Seite anzeigen. Hier

ist das, was ich bisher:

Datei Service

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

@Injectable() 

export class AddressDataService{ 
    addressData: Array<any>; 

    constructor(private http:Http){ } 
    getAddressData(){ 
     return this.http.get('./api/addressData.json') 
       .map((res:Response) => res.json()); 
    } 
} 

JSON Datei

[{ 
    "type": "home", 
    "id": 1 
}, { 
    "type": "apartment", 
    "id": 2 
}, { 
    "type": "homeless", 
    "id": 3 
}] 

Komponentendatei

import { Http } from '@angular/http'; 
import { AddressDataService } from './address.service'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: '....', 
    styleUrls: ['./styles.css'], 
    providers: [AddressDataService] 
}) 

constructor(private addressDataService: AddressDataService) {} 
    addressData = []; 
    getAddressData() { 
    this.addressDataService.getAddressData() 
        .subscribe(data => this.addressData = data); 
} 

HTML Datei

<div *ngFor="let addressDetail of addressData"> 
    {{addressDetail.type}} 
</div> 

mache ich das der richtige Weg?

Answer 1

Sie benötigen getAddressData zum Beispiel in Ihrem OnInit zu nennen, ich nehme an, Sie die Daten abrufen möchten, wenn Sie auf Seite navigiert.

So:

ngOnInit() { 
    this.getAddressData(); 
} 

Wenn dies gehandhabt wird, werden Sie eine andere Frage stellen. Http-Anfragen erlauben keine relativen Pfade, so

return this.http.get('./api/addressData.json') 

wird einen Fehler verursachen, müssen Sie den Punkt in Ihrem „url“ mit dem tatsächlichen vollständigen Pfad für die JSON-Datei ersetzen, von der obersten Ebene Ordner starten .

Answer 2

In Ihrer Komponente-Datei:

.subscribe(
     data => { 
     const helperArray = []; 
     for (let key in data) { 
      helperArray.push(data[key]); 
     } 
     } 
); 

Answer 3

Etwas in Ihrer Komponente Klasse muss Ihre Methode getAddressData aufrufen. Entweder der Konstruktor oder eine bessere Option ist, OnInit zu implementieren und von dort aus aufzurufen.