CODEWITHSUNDEEP
jsonionic-frameworkionic2
M.Yogeshwaran
M.Yogeshwaran

Reputation: 1469

Error While Trying to Display Value from Jsonobject in ionic 3?

Hello guys this may be dumb question but am new for ionic development , am facing problem while trying to display values from jsonobject,now let me explain in detail am fetching jsonobject from webservice and need to display it and i have successfully fetched the value from service but couldn't be able to display it while am trying am getting Cannot ready property 'StatusName 'undefined now let me post what i have tried so far :

This is my json getting from service:

{
  "StatusName": "Open",
  "ApprovalStatusName": "Awaiting Approval",
  "CreatedByName": "Mark  (Marx)",
  "LastModifiedByName": "Mark  (Marx)",
  "ContractID": 20,
  "ContractCode": "PIL",

}

And this is the typescript page: 

export class ContractApprovalViewPage {
  private  contracts :any;
  private contracttype:any;
  private results:any;


  constructor(public navCtrl: NavController, public navParams: NavParams,public contractApprovalViewService:ContractApprovalViewService ) {
  this.contracts=this.navParams.get('result');
   this.getContractApprovalView(this.contracts);

 }

getContractApprovalView(contracttype){
        this.contractApprovalViewService.getContractApproval(contracttype).then(data => {
            //console.log(data);
            this.results=data;
            console.log(this.results);
            console.log(this.results.CustomerName);
        });
    }
}

This is my service Page:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Events } from 'ionic-angular';
import 'rxjs/add/operator/map';
@Injectable()
export class ContractApprovalViewService {

    private _result;
    constructor(public http: Http,  public events: Events) { }
    getContractApproval(contracttype:any) {
    return new Promise(resolve => {
            this.http.get('http://172.16.6.187/sf/api/cnrt/getContractapprovalview/'+ contracttype.Column0 +'/C').subscribe(
                data => {
                //  console.log('http://xxxx/xx/xx/'+ contracttype.Column0 +'/C');
                    this._result = data;
                    resolve(JSON.parse(this._result._body));
                },
                err => {
                    this._result = err;
            //      this.events.publish("message:error", JSON.parse(this._result._body));
                }
            );
        });
    }
}

This is my html Page:

<ion-header>

  <ion-navbar>
    <ion-title>Approval</ion-title>
  </ion-navbar>

</ion-header>


<ion-content >
<ion-list no-padding>
    <ion-card>
    <ion-item >
     {{results.StatusName}}
    </ion-item>
    </ion-card>
  </ion-list> 
</ion-content>

Don't know where am making mistake how someone teach me where am wrong, Thanks in advance !

Upvotes: 0

Views: 141

Answers (1)

Anil
Anil

Reputation: 996

First declare variable above constructor

statusName:string;

then in below function

getContractApprovalView(contracttype){
        this.contractApprovalViewService.getContractApproval(contracttype).then(data => {
            //console.log(data);
            this.results=data;
            console.log(this.results);
            this.statusName = this.results.statusName; 
            //this.results.statusName status name key should match the response you are getting.
            console.log(this.results.CustomerName);
        });
    }
}

now in html just print status name

as you are not passing array so dont use results.statusname

<ion-content >
<ion-list no-padding>
    <ion-card>
    <ion-item >
     {{statusName}}
    </ion-item>
    </ion-card>
  </ion-list> 
</ion-content>

Upvotes: 3

Related Questions