ionic2如何顯示Json數據？

Question

我想獲取數據，並顯示它在離子2，但我有一個錯誤，我不明白。這是我的JSON數據的網址http://thethinker.com.ng/techwand/usr.php。我只想以列表格式顯示一些數據。 console.log（data）;將數據顯示在控制檯中，但在嘗試對數據進行排序時出現錯誤。使用{{item.data.first_name}} {{item.data.last_name}}

這是我的錯誤

SyntaxError: Unexpected token ' in JSON at position 1 
    at JSON.parse (<anonymous>) 
    at Response.Body.json (http://localhost:8100/build/main.js:59262:25) 
    at MapSubscriber.project (http://localhost:8100/build/main.js:46400:76) 
    at MapSubscriber._next (http://localhost:8100/build/main.js:45993:35) 
    at MapSubscriber.Subscriber.next (http://localhost:8100/build/main.js:15510:18) 
    at XMLHttpRequest.onLoad (http://localhost:8100/build/main.js:59691:38) 
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9655) 
    at Object.onInvokeTask (http://localhost:8100/build/main.js:4616:37) 
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9576) 
    at r.runTask (http://localhost:8100/build/polyfills.js:3:4831) 

這是我的打字稿類

import { Component } from '@angular/core'; 
    import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
    import { RedditService } from '../../app/serve/RedditServices'; 
    import { Http } from '@angular/http'; 
    import { DetailsPage } from '../details/details'; 
    import 'rxjs/Rx'; 
    /** 
    * Generated class for the RedditPage page. 
    * 
    * See http://ionicframework.com/docs/components/#navigation for more info 
    * on Ionic pages and navigation. 
    */ 
    @IonicPage() 
    @Component({ 
     selector: 'page-reddit', 
     templateUrl: 'reddit.html', 
    }) 
    export class RedditPage { 
     http: any; 
    baseUrl: String; 
    items: any; 


     constructor(public navCtrl: NavController, private redditservice:RedditService,http: Http) { 
     this.http= http; 
    this.baseUrl ="http://thethinker.com.ng/techwand/usr.php"; 
     this.getallpost(); 
     } 



    ngOnInit(){ 
     this.getallpost(); 
    } 



    getPosts(category, limit){ 
     this.redditservice.getPosts().subscribe(data => { 
      this.items =data.data; 
    }); 
    } 


    getallpost(){ 
     this.http.get(this.baseUrl).map(res => res.json()).subscribe(data => { 
      this.items =  data.data; 
console.log(data); 
    }); 
    } 

    } 

這是一些JSON數據

{ 
success: true, 
-data: (3)[ 
-{ 
first_name: "Kayla", 
last_name: "Leftwich", 
email: "kleftwich0@cnbc.com", 
gender: "Female", 
image: http://dummyimage.com/202x140.png/cc0000/ffffff, 
country: "United States", 
state: "North Carolina", 
phone_number: "1-(704)808-0271", 
professional: "Community Outreach Specialist" 
}, 
-{ 
first_name: "Jeniffer", 
last_name: "Concklin", 
email: "jconcklin1@seesaa.net", 
gender: "Female", 
image: http://dummyimage.com/104x134.png/5fa2dd/ffffff, 
country: "United States", 
state: "Ohio", 
phone_number: "1-(937)878-1803", 
professional: "Nuclear Power Engineer" 
}, 
-{ 
first_name: "Gonzalo", 
last_name: "Byk", 
email: "gbyk2@twitter.com", 
gender: "Male", 
image: http://dummyimage.com/112x100.png/dddddd/000000, 
country: "United States", 
state: "North Carolina", 
phone_number: "1-(336)376-6805", 
professional: "Account Coordinator" 
} 
] 
} 

我正在使用本教程https://www.joshmorony.com/using-http-to-fetch-remote-data-from-a-server-in-ionic-2/但它只適用於他的api，我試圖使用我的

Answer 1

問題是，你試圖在你的迭代中顯示item.first_name之類的東西（我假設你有一個迭代）。在對您的JSON進行更改後，您的數據中現在沒有像first_name這樣的屬性。我也會對你的代碼做一些修改。我們通常在一個服務中保存http請求，該服務返回一個Observable（在你的情況下），然後我們在組件中訂閱它。所以在你的RedditService用以下功能：

getData(){ 
    return this.http.get('https://thethinker.com.ng/techwand/usr.php') 
    .map(res => res.json().data) 
} 

並在你的組件訂閱。還要保留構造函數中所有不必要的東西。我們有OnInit來處理構造函數中不需要的需要的。

ngOnInit() { 
    this.redditService.getData() 
    .subscribe(data => { 
     this.items = data; 
    }); 
} 

然後你就可以在模板重複數據，如：

<ion-item *ngFor="let item of items"> 
    {{item.data}} {{item.two}} 
</ion-item> 

這將打印的姓和名。你似乎有一個奇怪的命名約定對那裏發生的，所以我建議你看看吧:)

這裏有一個Plunker