2017-09-25 33 views
0

幫助我需要閱讀應用程序與離子json文件,我開始在這個主題,我不知道如何做到這一點。如何在離子中讀取本地文件json?

好了,所以在這個類是在這種情況下,我把數據從https://randomuser.me

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 

@Injectable() 
export class SoilsServeProvider { 

constructor(public http: Http) { 

} 
getUsers() { 
return this.http.get('https://randomuser.me/api/?results=15') 
.map(res => res.json()) 
.toPromise(); 
} 

} 

在另一個類我把這個供應商,在控制器

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { SoilsServeProvider } from '../../providers/soils-serve/soils- 
serve'; 


@IonicPage() 
@Component({ 
selector: 'page-cultivos', 
templateUrl: 'cultivos.html', 
}) 
export class CultivosPage { 
users: any[] = []; 
constructor(public navCtrl: NavController, public navParams: NavParams, 
public userService: SoilsServeProvider) { 
} 

ionViewDidLoad(){ 
this.userService.getUsers() 
.then(data => { 
    this.users = data.results; 
}) 
.catch(error =>{ 
    console.error(error); 
}) 
} 
} 

終於恩認爲

<ion-header> 
<ion-navbar color="primary"> 
<ion-title> 
    Demo 10 
</ion-title> 
</ion-navbar> 
</ion-header> 

<ion-content> 
<ion-list> 
<ion-item *ngFor="let user of users"> 
    <ion-avatar item-start> 
    <img [src]="user.picture.medium"> 
    </ion-avatar> 
    <h2>{{ user.name.first | uppercase }}</h2> 
    <p>{{ user.email }}</p> 
</ion-item> 
</ion-list> 
</ion-content> 

而結果是這樣的

result

這個例子很確定,但我想從本地JSON讀取數據,例如它的應用程序/資產/ data.json路徑

回答

0

要讀取JSON文件。我將JSON文件放在src/assets下。

Write This function 
try { 
     this.services.getJSon().subscribe(result => { 
     this.questionList = result.examList; 
     console.log(this.questionList); 
     }); 
    } catch (e) { 
     console.log("Profile" + e); 
    } 

This function within Services 

getJSon() :any{ 
    return this.http.get('assets/data/test.json').map(res => res.json()); 
    }