Question

帮助我需要在app中阅读带有离子的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读取数据，例如它的app / assets / data.json

的路径

Answer 1

您好，您可以使用本机文件插件来读取设备中的文件

Native File Plugin

Answer 2

阅读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());
  }

如何读取离子中的本地文件json？

2 个答案: