Ionic 2 consuming json issue - json

Question

I'm using Ionic 2 and i couldn't consume a json. for some reason it throws an error.
Here is my updated code.
sales-service.ts
#Injectable()
export class SalesService {
constructor(public http: Http) {
this.http = http;
}
retrieveSalesData() {
return this.http.get("http://api.randomuser.me/?results=10");
}
}
sale.ts
#Component({
selector: 'page-sale',
templateUrl: 'sale.html',
providers: [SalesService],
})
export class SalePage {
data:any;
constructor(data: SalesService) {
this.data=data.retrieveSalesData().subscribe(data =>{
this.data=JSON.parse(data._body).results;
console.log("Inside Subscribe (All Elements):"+ this.data);
console.log("Inside Subscribe (Single Element):"+this.data[1].name.first);
});
console.log("Inside Constructor (All Elements):"+ this.data);
console.log("Inside Constructor (Single Element):"+ this.data[1].name.first);
}
ionViewDidLoad() {
console.log("Inside IonView (All Elements):"+ this.data);
console.log("Inside IonView (Single Element):"+this.data[1].name.first);
}
}
sale.html -- This is not the issue so i've commented the code
<ion-list>
<ion-content padding>
<!--<ion-list>
<ion-item *ngFor="let item of data">
<h2>{{item.name.first}}</h2>
</ion-item>
</ion-list>-->
</ion-content>
Here is my error:
I think i found the issue, but don't know how to clear it.
All elements are received in subscribe, but not in constructor and as well as in IonView. Please advise.
Here is my ionic info

Answer 1

I don't care of your update1.
I assume you get response object in this.data object.
If you are dealing with latest angular2 version, make sure you use let keyword instead of # as show below,
<ion-item ngFor="let person of data"> //<<<===here
<p>{{person?.name.first}}</p> //<<<=== (?.) operator is used as you deal with async call.
</ion-item>
</ion-list>

Answer 2

change your sales-service.ts file like bleow
#Injectable()
export class SalesService {
salesData:any;
constructor(public http: Http) {
//this.http = http;
this.salesData = [];
}
retrieveSalesData() {
this.http.get('https://randomuser.me/api/?results=10')
.subscribe(salesData => {
this.salesData = salesData.result;
});
}
}
inside your html
<ion-list>
<ion-item *ngFor="let person of data">
<p>{{person.name.first}}</p>
</ion-item>
</ion-list>
</ion-content>

Answer 3

Try the follwoing
sales-service.ts
#Injectable()
export class SalesService {
salesData:any;
constructor(public http: Http) {
this.http = http;
this.salesData = null;
}
retrieveSalesData() {
return this.http.get('https://randomuser.me/api/?results=10')
}
}
sale.ts
#Component({
selector: 'page-sale',
templateUrl: 'sale.html',
providers: [SalesService]
})
export class SalePage {
data:any;
constructor(private salesService: SalesService) {
}
ionViewDidLoad() {
this.salesService.retrieveSalesData()
.subscribe(salesData => {
this.data= salesData;
});
}
}

Answer 4

Try upgrading your app-scripts:
npm install #ionic/app-scripts#latest
Their previous version was missing a JSON plugin which they just added to the rollup process.

Answer 5

I found the answer that's working for me.
This is what i did,
public data:Users[]=[];
constructor(public pdata: SalesService) {
pdata.retrieveSalesData().subscribe(data =>{
JSON.parse(data._body).results.forEach(element => {
this.data.push(
new Users(element.name.first)
);
});
});
}
export class Users {
name: string;
constructor(_name: string) {
this.name = _name;
}
}
This works for me. If there is an alternative and elegant way. please feel free to update the answer. Thank you for all your time.