ionic2 Wie zeigt man Json-Daten an?

Question

Ich versuche, Daten zu holen und es in ionischen 2 anzuzeigen, aber ich habe einen Fehler, den ich nicht verstehe. Dies ist die URL zu meinen JSON-Daten http://thethinker.com.ng/techwand/usr.php. Ich möchte nur einige der Daten in einem Listenformat anzeigen. das console.log (Daten); zeige die Daten in der Konsole an, aber ich bekomme Fehler, wenn ich versuche, die Daten zu sortieren. mit {{item.data.first_name}} {{}} item.data.last_name

Das ist mein Fehler

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) 

Diese

meine Typoskript Klasse ist

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); 
    }); 
    } 

    } 

dies einige ist die json Daten

{ 
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" 
} 
] 
} 

ich verwende dieses Tutorial https://www.joshmorony.com/using-http-to-fetch-remote-data-from-a-server-in-ionic-2/ aber es funktioniert nur für thier api und ich versuche zu Verwenden Sie meine

Answer 1

Das Problem ist, dass Sie versuchen, etwas wie item.first_name in Ihrer Iteration anzuzeigen (ich nehme an, Sie haben eine Iteration). Es gibt keine solche Eigenschaft wie first_name in Ihren Daten, nachdem Sie Änderungen an Ihrem JSON vorgenommen haben. Und ich würde auch einige Änderungen an Ihrem Code vornehmen. Normalerweise halten wir http-Anfragen in einem Service, der in Ihrem Fall ein Observable zurückgibt, das wir dann in der Komponente abonnieren. Also in Ihrem RedditService mit der folgenden Funktion:

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

und in Ihrer Komponente abonnieren. Behalte auch alle unnötigen Dinge von deinem Konstruktor. Wir haben das OnInit, um Dinge zu behandeln, die nicht im Konstruktor sind.

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

Dann können Sie Ihre Daten in Vorlage wie iterieren:

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

Dies wird den Vornamen und Nachnamen drucken. Sie scheinen eine seltsame Namensgebung geht dort zu haben, so würde ich dich hineinschauen vorschlagen :)

Hier ist ein Plunker