I want to print json response in html page in ionic.please help me

Ionic Framework ionic-v3
1

This is my function

ionViewDidLoad() {
var headers = new Headers();
headers.append(‘Content-Type’, ‘application/x-www-form-urlencoded’);
let options = new RequestOptions({ headers: headers });

 this.http.get("http://www.spangu.com/ionic2/ionicdemo/index.php/GetAllUser")
 
  .subscribe(data => {
    this.data = data
   
   
   
    //let clients = JSON.parse(this.data)
    //alert(clients);
   
  }, error => {
    //console.log(error);// Error getting the data
    alert("No Internet connection!")
  });

};
below my html code

{{post.email}}

this is json response sending from the serveer:-{“GetAllUsers”: [{“user_id”:“1”,“username”:“Faisal Arif",“useremail”:"faisal@flycoders.com”,“userphone”
:“900124578”,“userpass”:“faisal”,“image”:""}]}

2

if you can’t even format your post correctly don’t expect anyone to answer this question

3

@FnnHuman what i am wrong?.

4

@FnnHuman Actually i want to print a specific json object. like username.below is my json object sending from the server.
{“GetAllUsers”: [{“user_id”:“1”,“username”:“Faisal Arif",“useremail”:"faisal@flycoders.com”,“userphone”
:"",“userpass”:"",“image”:""}]}

and this is my app ned code below
this.http.get(“http://www.spangu.com/ionic2/append/index.php/GetAllUser”)

 .subscribe((res: Response) => {
            this.mydata = res.json();
            
        });
1 Like
5

Hello

It is very unclear what exactly you’re trying to display in your html, whats is {{post.email}} supposed to be?

I’m going to assume that you want to display the email of one particular user :

(res : Response) => {
  let data = res.json();
  for(let user of data.GetAllUsers){
    if(user.user_id==whateverUserIdYouWant){
      this.data = user.useremail;
    }      
  }
}

Your html code to display the email would be {{data}}

Does that answer your question?
If not, please be more specific

6

@Sachiyo actually i want to display all data into my html page,like username and email.

7

@Sachiyo {{post.email}} means.

*ngFor=" let post of mydata">
{{post.email}}

8

I see.

Well as you said, you json object is

{“GetAllUsers”: [{“user_id”:“1”,“username”:“Faisal Arif",“useremail”:"faisal@flycoders.com”,“userphone”
:"",“userpass”:"",“image”:""}]}

Your code should be

*ngFor="let post of mydata.GetAllUsers"

This way, post is your user

{“user_id”:“1”,“username”:“Faisal Arif",“useremail”:"faisal@flycoders.com”,“userphone”
:"",“userpass”:"",“image”:""}

and you can use post.useremail
If you want to display the whole json object at once, you should use JSON.stringify(post)

9

when i use your code showing an error.

error
error.PNG464×665 17.7 KB

10

Ok.please give a example of code .if possible

11

actually am new in ionic. that why.am telling for a demo code

12

Below code is right?
this.http.get(“http://www.spangu.com/ionic2/index.php/GetAllUser”)

  .subscribe(data => {
 
 
   this.mydata = data;

  }, error => {
  
    alert("No Internet connection!")
  });
13

Here’s your code

subscribe((res:Response)=>{
    let dataTemp = res.json(); //dataTemp is the json object you showed me
    this.data = dataTemp.GetAllUsers; //contains a [] object with all yours users
  })

and in your html

*ngFor="let post of data">
{{post.useremail}}
14

@Sachiyo Thank you so much.its working fine.

15

Instead of criticizing other people’s format, try to help them by either answering their question or trying to fix the way they post. If you don’t want to apply any of the above options, don’t reply at all. This is the ionicforum where a pro and a newbie can work together. Thanks!

5 Likes