How to parse only single data from file in ionic 3 using HTTP


#1

hello all ,
I have to display only single user data from Json file . I know to display multiple User data from json file we Use *ngFor =" let item of items " like this …But to display only single data I can’t use ngfor right ?? so How I can achieve this task in ION-HTML file??


#2

Do you want to show single data with any condition? What will be the condition to get the single data ? clarify your requirement.

You can filter data with *ngFor or you can filter the data from component.


#3

https://jsonplaceholder.typicode.com/posts/1

I have to Parse JSON output from “https://jsonplaceholder.typicode.com/posts/1” and display on page

So my problem is if there is multiple user data instead of this single data to display I used ngFor right ? but here how can I display this data without using ngfor

my TS file code is this

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { HttpClient} from ‘@angular/common/http’;
import { Observable } from ‘rxjs/Observable’;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
public items:any;
constructor(public navCtrl: NavController , public http: HttpClient) {
this.loadData();
}

loadData(){
let data : any;
data = this.http.get(‘https://jsonplaceholder.typicode.com/posts/’);
data.subscribe(result => {
this.items=result;
})
}
}

my HTML file code is this
image
and this is showing error to me co.items is undefined …so how can i solved this ?


#4

I want output like this
image


#5
data.subscribe(result => {
this.items=result[0];
})

Do link this in component.ts as you are getting single object.


#6

In component.ts or Home.ts where ?


#7

where you request http data = this.http.get(‘https://jsonplaceholder.typicode.com/posts/’);


#8

Thank you but , is there any changes I have to do in HTML file ?
image

because it showing me error co.items in undefined


#9

No , don’t have to change anything in html


#10

thanks but it giving me error on browser " co.items in undefined"


#11

what type of error are you getting ?


#12

co.items in undefined


#13

btw you have to request data = this.http.get(‘https://jsonplaceholder.typicode.com/posts/1’);


#14

yes from this only https://jsonplaceholder.typicode.com/posts/1

can you please check my code
home.ts file

my html file
image


#15

why you are using *ngFor ? *ngFor only for Array of Objects. But you are getting only one object . So don’t need to use *ngFor. remove the line *ngFor="let item of items" form HTML


#16

then it giving me error “co.item is undefined”


#17

this.item=result[0];

check the code carefully
replace items with item


#18

Thanks but still there is error co.item is undefined


#19

can you please try this task to parse the data from
https://jsonplaceholder.typicode.com/posts/1

or can i send my code to you ? on your id ?


#20

upload your code on stackblitz