How to display the plain text value that i get in ionic 3 API Call

Question

Hello there I am making a registration app in ionic 3, what I am trying to achieve is I am making an API call on which I am posting data, then I get a response, then I want to display it in alert and then redirect the page.

This is my register-user.html

<ion-header>
    <ion-navbar hideBackButton color="title">
        <ion-title text-center>Register</ion-title>
    </ion-navbar>
</ion-header>
<ion-content class="content">
        <ion-grid>
            <ion-row>
              <ion-col col-12 ion-fixed>
                <ion-list>
                    <ion-card>
                        <ion-card-header>
                            <ion-img class="logo" alt="logo" [src]="myImage"></ion-img>
                        </ion-card-header>
                        <ion-card-content>
                            <ion-item>
                                <ion-label floating>Full Name</ion-label>
                                <ion-input autocomplete="on" type="text" #name></ion-input>
                            </ion-item>
                            <ion-item>
                                <ion-label floating>Email-ID</ion-label>
                                <ion-input autocomplete="on" type="email" #email></ion-input>
                            </ion-item>
                            <ion-item>
                                <ion-label floating>Mobile Number</ion-label>
                                <ion-input autocomplete="on" type="number" #mobile></ion-input>
                            </ion-item>
                            <ion-item>
                                <ion-label floating>Company Name</ion-label>
                                <ion-input autocomplete="on" type="text" #companyName></ion-input>
                            </ion-item>
                            <ion-item class="mpin">
                                <ion-label text-center floating><b>MPIN</b></ion-label>
                                <ion-input text-center type="password" #mpin></ion-input>
                            </ion-item>
                            <ion-item class="proceedButton">
                                <button ion-button large color="secondary" outline padding strong round (click)="register()">&nbsp;<ion-icon name="arrow-forward"></ion-icon>&nbsp;</button>
                            </ion-item>
                            <ion-item>
                                <button ion-button large color="primary" outline padding block round (click)="home()">Registered? Login Now!</button>
                            </ion-item>
                        </ion-card-content>
                    </ion-card>
                </ion-list>
               </ion-col>
            </ion-row>
        </ion-grid>
</ion-content>

This is my register-user.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Http } from '@angular/http';

@IonicPage()
@Component({
  selector: 'page-register-user',
  templateUrl: 'register-user.html',
})

export class RegisterUserPage
    {
        @ViewChild('name') name;
        @ViewChild('email') email;
        @ViewChild('mobile') mobile;
        @ViewChild('companyName') companyName;
        @ViewChild('mpin') mpin;

        myImage:string="";
        data:any = {};

        constructor(private http: Http, public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController)
            {
                this.myImage="./assets/logo.png";
                this.data.response = '';
            }

        register()
            {
                var link = 'some url of API';
                var myData = JSON.stringify({name: this.name.value, email: this.email.value, password: this.mpin.value, company: this.companyName.value, contact_no: this.mobile.value});

                this.http.post(link, myData).subscribe(data =>{
                    this.data.response = data["_body"]; //https://stackoverflow.com/questions/39574305/property-body-does-not-exist-on-type-response
                },
                error =>{
                    console.log("Oooops!");
                });

                let alert = this.alertCtrl.create(
                    {
                        title: 'Login Error!',
                        subTitle: this.data.response,
                        buttons: ['OK']
                    });
                alert.present();
            }   

        ionViewDidLoad()
            {
                console.log('ionViewDidLoad RegisterUserPage');
            }
    }

I am getting response like: {"msg":"success","msg":"user registered"}

i also tried to display this.data.response.msg;

still no success, i also had a problem that when i click the button first time the alert window shows no value. but when 2nd time i again click the submit button it shows the response value why so? where am i wrong?

Answer 1

You need to parse the response, like this:

this.http.post(link, myData)
    .map(response => response.json()) // <--- Here!
    .subscribe(data => {

        // The "data" property is now the body, 
        // so you can access to it as an object

        this.data.response = data; 

    }