Come caricare i dati JSON nel componente Angular2

Dopo aver eseguito molti tutorial su tinterweb, ho finalmente iniziato a provare a creare qualcosa di utile per me utilizzando Angular2 e ho trovato il mio primo numero. Non riesco a caricare i dati JSON nel mio componente di servizio.Come caricare i dati JSON nel componente Angular2

il mio file people.json è memorizzato in una cartella denominata dati nella cartella superiore.

people.json

"people":[ 
    { age: 40, name: "Jordan Houston" }, 
     { age: 38, name: "Robert Eastham" }, 
     { age: 23, name: "Josh Beh" }, 
     { age: 23, name: "Joseph Canina" }, 
     { age: 24, name: "Alexandra Wilkins" }, 
     { age: 22, name: "Kiersten Costanzo" }, 
     { age: 23, name: "Ku Sherwood" }, 
     { age: 25, name: "Arta Halili" }, 
     { age: 24, name: "Patrick Cooney" }, 
     { age: 23, name: "Z.A. Perr" }, 
     { age: 18, name: "Tyler Mulligan" }, 
     { age: 26, name: "Dennis Dempsey" }, 
     { age: 32, name: "Francis Yeager" }, 
     { age: 23, name: "Phil Belardi" } 
]

Credo che il mio problema risiede nelle friends.service.ts

friend.service.ts

import {Injectable} from 'angular2/core'; 
import {Http, HTTP_PROVIDERS} from 'angular2/http'; 

@Injectable() 

export class FriendService { 

    friends:Array<any>; 

    constructor(private http:Http) 
     { 
      //console.log(">>friend.service.ts:constructor--") 
      http.request('./data/people.json') 
        .subscribe(response => this.friends = response.json())); 
    } 

     getFriends() 
     { 
      //console.log(">>friend.service.ts:getFriends--") 
      console.log(this.friends) 
      return this.friends 
     } 
}

friend.service.ts viene utilizzato entro the friend.component.ts

friend.component.ts

import { Component } from 'angular2/core'; 
import { FriendService } from 'app/friend.service'; 

@Component({ 
    selector: 'my-friends', 
     providers: [FriendService], 
     styles: [` 
      div { 
       background-color:#EFEFEF; 
       margin-bottom:15px; 
       padding:15px; 
       border:1px solid #DDD; 
       box-shadow:2px 2px 2px 0 rgba(0, 0, 0, 0.3); 
       border-radius:3px; 
      } 
     h2 { 
      text-align: center; 
     } 
    `], 
    template: ` 
     <h1>Hello from the {{ componentName }}!</h1> 
     <div *ngFor="#f of friends"> 
      <h3>Name: {{ f.name }}</h3> 
      <h4>Age: {{ f.age }}</h4> 
     </div> 
    ` 
}) 


export class FriendComponent { 

    componentName: 'FriendComponent'; 

     constructor(private _friendService: FriendService) 
     { 
     this.friends = _friendService.getFriends(); 
    } 
}

questo vive dentro main.ts

main.ts

import { Component } from 'angular2/core'; 
import { bootstrap } from 'angular2/platform/browser'; 

import { FriendComponent } from 'app/friend.component'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 


@Component({ 
    selector: 'my-app', 
    directives: [FriendComponent], 
    styles: [` 
    h1 { 
    color:#545454; 
    background:#02A8F4; 
    padding:15px; 
    box-shadow:2px 2px 2px 0 rgba(0, 0, 0, 0.3); 
    } 
    `] 
    template: ` 
    <div> 
    <h1>Hello from the {{componentName}}.</h1> 
    <my-friends></my-friends> 
    </div> 
    ` 
}) 
export class AppComponent { 
    componentName: 'AppComponent' 
} 

bootstrap(AppComponent,[HTTP_PROVIDERS])

... e qui è la pagina di indice ...

<!DOCTYPE html> 
<html> 
<head> 
    <script>document.write('<base href="' + document.location + '" />');</script> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!--Add Bootstrap CSS Styles--> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

    <!-- IE required polyfills, in this exact order --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-shim.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script> 
    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script> 

    <!-- Angular polyfill required everywhere --> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script> 

    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <script src="https://code.angularjs.org/tools/typescript.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/router.dev.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script> 

    <script> 
     System.config({ 
     transpiler: 'typescript', 
     typescriptOptions: { emitDecoratorMetadata: true }, 
     packages: { 
      'api': {defaultExtension: 'ts'}, 
      'app': {defaultExtension: 'ts'} 
     } 
     }); 
    System.import('app/main') 
      .then(null, console.error.bind(console)); 
    </script> 

</head> 
<body class="container"> 

    <my-app>Loading...</my-app> 

</body> 
</html>

Qualsiasi aiuto sarebbe molto apprezzato;)

fonte

2016-04-20 Beaker

In realtà, è perché i dati vengono caricati asincrono ronously. Quindi, all'interno del costruttore del tuo componente, inizialmente ottieni un valore non definito.

constructor(private _friendService: FriendService) { 
    this.friends = _friendService.getFriends(); 
}

Per mantenere il costruttore del genere, è necessario refactoring del codice per rendere il metodo del vostro servizio getFriends tornare un'osservabile:

@Injectable() 
export class FriendService { 
    constructor(private http:Http) { 
    } 

    getFriends() { 
    return this.http.request('./data/people.json') 
       .map(res => res.json()); 
    } 
}

quindi è possibile utilizzare il tubo async nel modello componente :

template: ` 
    <h1>Hello from the {{ componentName }}!</h1> 
    <div *ngFor="#f of friends | async"> 
     <h3>Name: {{ f.name }}</h3> 
     <h4>Age: {{ f.age }}</h4> 
    </div> 
`

fonte

2016-04-20 16:04:14

Hi Thierry Grazie per rispondere in modo rapido. Ho già provato a utilizzare la mappa, ma sto ricevendo un errore nella console affermando ... TypeError: this.http.request (...). Map non è una funzione Come risultato, non è ancora rendering. .. – Beaker

Siete i benvenuti! Devi importare l'operatore. Vedi questa domanda: http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error-http-get-map-is-not-a-function-in/34515276#34515276. –

Il commento su cosa fare per errori relativi a .map dovrebbe essere aggiunto alla risposta principale, che è stato un trip-up anche per me, probabilmente altri. –

Come caricare i dati JSON nel componente Angular2

risposta

Problemi correlati