How to parse the json params value and show in page?

anespa · January 25, 2018, 4:35am

Friends,

I am passing some web service taken json value as parameter in ‘NavControl’ and plan to show in 2nd page. But I get that object there . How to parse the json object there to show the data contents.

my function to pass json value is

showDetails(bid,lbid,zone) {
    let buildingBasic = this.propertyProvider.getBuildingBasic(lbid,bid)
    .then(data => {
      this.result = data;
    });
    
    let buildingDemand = this.propertyProvider.getBuildingDemand(lbid,zone,bid)
    .then(data => {
      this.result = data;
    });
    this.navCtrl.push(this.payPage, {
      param1: buildingBasic,  param2: buildingDemand
    })
  }

typescript file as

export class PayPage {
  param1 : any;
  param2 : any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.param1 = navParams.data.param1;
    this.param2 = navParams.data.param2;
    //alert(JSON.stringify(this.param2));
  }

pay.html ( not know how to process here)

<ion-content padding>
  <ion-label>Building ID: </ion-label> 
  <ion-item>{{param1}}</ion-item>

  <button ion-button>Pay</button>

</ion-content>

Please advise how to parse the parameter data in this html file…

Thanks

Anes

umerf6455 · January 25, 2018, 9:21am

Hi @anespa, Try something like this:

export class PayPage {
  param1 : any;
  param2 : any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.param1 = JSON.parse(navParams.data.param1);
    this.param2 = JSON.parse(navParams.data.param2);
    //alert(this.param2);
  }

Hope it helps. Tell me if this doesn’t work.
Cheers!!!

anespa · January 25, 2018, 9:28am

Dear Umer,

I tried your method according to my friend Atif already. But got error as

Please advise , I will share code on demand…

Waiting fast help

Thanks

Anes

umerf6455 · January 25, 2018, 9:44am

Hi @anespa, Please make sure that the data you are using as JSON is correctly formatted. I mean it should be a proper JSON object. And please tell me that when you are storing JSON data, you are Stringifying it, I mean something like this:

JSON.stringify(data);

anespa · January 25, 2018, 9:48am

No I am not stringify data …

my button click call function

showDetails(bid,lbid,zone) {
 
    let buildingBasic = '';
    let buildingDemand = '';
   
    this.propertyProvider.getBuildingBasic(lbid,bid)
    .then(data => {
      this.result = data;
      buildingBasic = data;
         
      this.propertyProvider.getBuildingDemand(lbid,zone,bid)
         .then(data => {
           this.result = data;
           buildingDemand = data;
              
              this.navCtrl.push(this.payPage, {
                  param1: buildingBasic,  param2: buildingDemand
              });
          });
  
      });
  }

and my provider web service is

getBuildingBasic(lbid,buidingid) {
    var obj = {wspassword: 'password', wsname: 'getBuildingByID', lbid: lbid, bid: buidingid};
    var myData = JSON.stringify(obj);
    if(this.data)
    {
      return Promise.resolve(this.data);
    } else {
      return new Promise
      (
        resolve => {
                     this.http.post('http://172.16.8.70/web/sanchayarestservice/index.php/sanchaya/',myData,{ headers: new HttpHeaders()
                     , responseType: 'json'})
                     .map(res => res)
                     .subscribe
                               (res => {
                                 resolve(res);
                               },
                               err =>{console.log("oops error in basic building data retrieval");}
                              );
        }
      );
    }
  }

and

 getBuildingDemand(lbid,zone,bid) {
    var obj = {wspassword: 'password', wsname: 'getBuildingDemandByID', lbid: lbid, bid: bid, zone: zone};
    var myData = JSON.stringify(obj);
    if(this.data)
    {
      return Promise.resolve(this.data);
    } else {
      return new Promise
       (
         resolve => {
                      this.http.post('http://172.16.8.70/web/sanchayarestservice/index.php/sanchaya/',myData,{ headers: new HttpHeaders()
                      , responseType: 'json'})
                      .map(res => res)
                      .subscribe
                                (res => {
                                  resolve(res);
                                },
                                err => {console.log("oops error in building demand data retrieval");}
                              );
         }
       );
    }

  }

Please advise

Thanks

umerf6455 · January 25, 2018, 10:24am

Hi @anespa, Sorry for being late. Please try this code in your button click call function. Tell me if it help.

showDetails(bid,lbid,zone) {
 
    let buildingBasic = '';
    let buildingDemand = '';
   
    this.propertyProvider.getBuildingBasic(lbid,bid)
    .then(data => {

           var temp = JSON.stringify(data);
           this.result = JSON.parse(temp);
  
           var temp2 = JSON.stringify(data);
           buildingDemand = JSON.parse(temp2);

    
      this.propertyProvider.getBuildingDemand(lbid,zone,bid)
         .then((data) => {
           
           var temp3 = JSON.stringify(data);
           this.result = JSON.parse(temp3);
  
           var temp4 = JSON.stringify(data);
           buildingDemand = JSON.parse(temp4);

              
              this.navCtrl.push(this.payPage, {
                  param1: buildingBasic,  param2: buildingDemand
              });
          });
  
      });
  }

anespa · January 25, 2018, 10:48am

umerf6455:

showDetails(bid,lbid,zone) {

let buildingBasic = '';
let buildingDemand = '';

this.propertyProvider.getBuildingBasic(lbid,bid)
.then(data =&gt; {

       var temp = JSON.stringify(data);
       this.result = JSON.parse(temp);

       var temp2 = JSON.stringify(data);
       buildingDemand = JSON.parse(temp2);

  this.propertyProvider.getBuildingDemand(lbid,zone,bid)
     .then((data) =&gt; {

       var temp3 = JSON.stringify(data);
       this.result = JSON.parse(temp3);

       var temp4 = JSON.stringify(data);
       buildingDemand = JSON.parse(temp4);

          this.navCtrl.push(this.payPage, {
              param1: buildingBasic,  param2: buildingDemand
          });
      });

  });

}

Dear Umer,

I tried your code . I added 2 alert in your code as shown

showDetails(bid,lbid,zone) {
 
    let buildingBasic = '';
    let buildingDemand = '';
   
    this.propertyProvider.getBuildingBasic(lbid,bid)
    .then(data => {

           var temp = JSON.stringify(data);
           this.result = JSON.parse(temp);
  
           var temp2 = JSON.stringify(data);
           buildingDemand = JSON.parse(temp2);

    
      this.propertyProvider.getBuildingDemand(lbid,zone,bid)
         .then((data) => {
           
           var temp3 = JSON.stringify(data);
           this.result = JSON.parse(temp3);
  
           var temp4 = JSON.stringify(data);
           buildingDemand = JSON.parse(temp4);
           alert(buildingBasic);
           alert("second"+buildingDemand);
              
              this.navCtrl.push(this.payPage, {
                  param1: buildingBasic,  param2: buildingDemand
              });
          });
  
      });
  }

I can see that first ‘buildingBasic’ return null value and ‘buldingDemand’ gives object…

How it can rectify. You can see it in screenshot

Please advise

Thanks

umerf6455 · January 25, 2018, 11:00am

Sorry @anespa, There was a mistake in previous code which i sent you. Try this one, It will show you 4 alerts. Can you please send me the screenshots of all 4 of them? Please use the following code:

showDetails(bid,lbid,zone) {
 
    let buildingBasic = '';
    let buildingDemand = '';
   
    this.propertyProvider.getBuildingBasic(lbid,bid)
    .then(data => {

           var temp = JSON.stringify(data);
           this.result = JSON.parse(temp);
  
           var temp2 = JSON.stringify(data);
           buildingBasic = JSON.parse(temp2);
          
           alert("this.result "+this.result);
           alert("buildingBasic "+buildingBasic);
           
    
      this.propertyProvider.getBuildingDemand(lbid,zone,bid)
         .then((data) => {
           
           var temp3 = JSON.stringify(data);
           this.result = JSON.parse(temp3);
  
           var temp4 = JSON.stringify(data);
           buildingDemand = JSON.parse(temp4);

           alert("this.result Again "+this.result);
           alert("buildingDemand "+buildingDemand);
           
       
              this.navCtrl.push(this.payPage, {
                  param1: buildingBasic,  param2: buildingDemand
              });
          });
  
      });
  }

flycoders_sourav · January 25, 2018, 4:54pm

export class PayPage {
  param1 : any;
  param2 : any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.param1 = navParams.get("param1");
    this.param2 = navParams.get.("param2");
    //alert(JSON.stringify(this.param2));
  }

You can try like this.

<ion-content padding>
  <ion-label>Building ID: </ion-label> 
  <ion-item>{{param1}}</ion-item>

  <button ion-button>Pay</button>

</ion-content>

I hope your problem will be fixed
Good Luck
Thank you.

anespa · January 27, 2018, 3:07am

umerf6455:

showDetails(bid,lbid,zone) {

let buildingBasic = '';
let buildingDemand = '';

this.propertyProvider.getBuildingBasic(lbid,bid)
.then(data =&gt; {

       var temp = JSON.stringify(data);
       this.result = JSON.parse(temp);

       var temp2 = JSON.stringify(data);
       buildingBasic = JSON.parse(temp2);

       alert("this.result "+this.result);
       alert("buildingBasic "+buildingBasic);

  this.propertyProvider.getBuildingDemand(lbid,zone,bid)
     .then((data) =&gt; {

       var temp3 = JSON.stringify(data);
       this.result = JSON.parse(temp3);

       var temp4 = JSON.stringify(data);
       buildingDemand = JSON.parse(temp4);

       alert("this.result Again "+this.result);
       alert("buildingDemand "+buildingDemand);

          this.navCtrl.push(this.payPage, {
              param1: buildingBasic,  param2: buildingDemand
          });
      });

  });

}

Hi @umerf6455, @flycoders_sourav

I am outside of office now , the value taken from local web service in LAN. But Sourav, How I
can taken each parameter in return as you mention in HTML ?

My json data format is

please advise when the data came in {{param1}} is like that . How to show same there?

Thanks

Anes

flycoders_sourav · January 27, 2018, 3:08am

you want to pass whole json array into the next page or a particular data?

flycoders_sourav · January 27, 2018, 3:13am

<ion-content padding>
  <ion-label>Building ID: </ion-label> 
  <ion-item *ngIf="param1">{{param1.PTax}}</ion-item>

  <button ion-button>Pay</button>

</ion-content>

How I
can taken each parameter in return as you mention in HTML ?
sorry for that I did not noticed this above point

I hope your problem will be fixed.
Good luck
Thank you

anespa · January 27, 2018, 3:55am

I pass whole json array to next page … I have 2 different json objects passed .

flycoders_sourav · January 27, 2018, 3:59am

No problem you can try like this

<ion-content padding>
  <ion-label>Building ID: </ion-label> 
  <ion-item *ngIf="param1">{{param1.PTax}}</ion-item>

  <button ion-button>Pay</button>

</ion-content>

anespa · January 29, 2018, 4:31am

Dear @flycoders_sourav

Your html code stuff will not show any value . Please advise …

Thanks

Anes

flycoders_sourav · January 29, 2018, 5:05am

Please show me your details page code

anespa · January 29, 2018, 8:01am

Dear @flycoders_sourav

That not show data is fixed using for loop like below

<h4> Building Details </h4>
  <ion-label>Building ID: </ion-label> 
  <ion-item *ngFor="let item of param1">{{item.numBuildingID}}</ion-item> 

  <ion-label>Ward No/Door No: </ion-label> 
  <ion-item *ngFor="let item of param1">{{item.intWardNo}}/{{item.intDoorNo1}}</ion-item> 

  <ion-label>Owner/s Name: </ion-label>
  <ion-item *ngFor="let item of param1">{{item.chvOwners}}</ion-item>

  <ion-label>Building Category: </ion-label>
  <ion-item *ngFor="let item of param1">{{item.chvCategory}}</ion-item>

  <ion-label>Description in AR: </ion-label>
  <ion-item *ngFor="let item of param1">{{item.chvBuildDescInAREng}}</ion-item>

  <ion-label>Annual PTax: </ion-label>
  <ion-item *ngFor="let item of param1">{{item.PTax}}</ion-item>

  <ion-label>Annual Library Cess: </ion-label>
  <ion-item *ngFor="let item of param1">{{item.LC}}</ion-item>

  <ion-label>Surcharge: </ion-label>
  <ion-item *ngFor="let item of param1">{{item.Column1}}</ion-item>

  <ion-label>Last Updated as per Assessment Register: </ion-label>
  <ion-item *ngFor="let item of param1">{{item.dtLastUpdatedDateTime | date:'d/M/yyyy'}}</ion-item>

but in case of second object I need to show a difficult structure with some calculation…

my object value is like

[{"numBuildingID":"40171010000010","intYearId":"2014","chvPrintText":"14-15","tnyPeriodID":"1","chvPeriod":"Ist Half","intAccountHeadId":"1","chvTaxName":"Property Tax","fltAmount":"302.00","Penal":"120.80","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2014","chvPrintText":"14-15","tnyPeriodID":"1","chvPeriod":"Ist Half","intAccountHeadId":"2","chvTaxName":"Library Cess","fltAmount":"16.00","Penal":"0.00","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2014","chvPrintText":"14-15","tnyPeriodID":"2","chvPeriod":"IInd Half","intAccountHeadId":"1","chvTaxName":"Property Tax","fltAmount":"302.00","Penal":"102.68","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2014","chvPrintText":"14-15","tnyPeriodID":"2","chvPeriod":"IInd Half","intAccountHeadId":"2","chvTaxName":"Library Cess","fltAmount":"15.00","Penal":"0.00","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2015","chvPrintText":"15-16","tnyPeriodID":"1","chvPeriod":"Ist Half","intAccountHeadId":"1","chvTaxName":"Property Tax","fltAmount":"302.00","Penal":"84.56","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2015","chvPrintText":"15-16","tnyPeriodID":"1","chvPeriod":"Ist Half","intAccountHeadId":"2","chvTaxName":"Library Cess","fltAmount":"16.00","Penal":"0.00","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2015","chvPrintText":"15-16","tnyPeriodID":"2","chvPeriod":"IInd Half","intAccountHeadId":"1","chvTaxName":"Property Tax","fltAmount":"302.00","Penal":"66.44","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2015","chvPrintText":"15-16","tnyPeriodID":"2","chvPeriod":"IInd Half","intAccountHeadId":"2","chvTaxName":"Library Cess","fltAmount":"15.00","Penal":"0.00","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2016","chvPrintText":"16-17","tnyPeriodID":"1","chvPeriod":"Ist Half","intAccountHeadId":"1","chvTaxName":"Property Tax","fltAmount":"302.00","Penal":"48.32","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2016","chvPrintText":"16-17","tnyPeriodID":"1","chvPeriod":"Ist Half","intAccountHeadId":"2","chvTaxName":"Library Cess","fltAmount":"16.00","Penal":"0.00","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2016","chvPrintText":"16-17","tnyPeriodID":"2","chvPeriod":"IInd Half","intAccountHeadId":"1","chvTaxName":"Property Tax","fltAmount":"302.00","Penal":"30.20","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2016","chvPrintText":"16-17","tnyPeriodID":"2","chvPeriod":"IInd Half","intAccountHeadId":"2","chvTaxName":"Library Cess","fltAmount":"15.00","Penal":"0.00","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2017","chvPrintText":"17-18","tnyPeriodID":"1","chvPeriod":"Ist Half","intAccountHeadId":"1","chvTaxName":"Property Tax","fltAmount":"302.00","Penal":"12.08","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2017","chvPrintText":"17-18","tnyPeriodID":"1","chvPeriod":"Ist Half","intAccountHeadId":"2","chvTaxName":"Library Cess","fltAmount":"16.00","Penal":"0.00","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2017","chvPrintText":"17-18","tnyPeriodID":"2","chvPeriod":"IInd Half","intAccountHeadId":"1","chvTaxName":"Property Tax","fltAmount":"302.00","Penal":"0.00","AdvanceFlag":"0"},{"numBuildingID":"40171010000010","intYearId":"2017","chvPrintText":"17-18","tnyPeriodID":"2","chvPeriod":"IInd Half","intAccountHeadId":"2","chvTaxName":"Library Cess","fltAmount":"15.00","Penal":"0.00","AdvanceFlag":"0"}]

I need to show them as in preview with some calculations like preview

newDemand

Please advise how it can done with above object…

Thanks

Anes

flycoders_sourav · January 29, 2018, 8:30am

where is your .ts file

Topic		Replies	Views
How to show JSON parameters in HTML Ionic Framework	1	378	February 10, 2023
Json Ionic 3 - take and display a specific data from a json file with click button ionic-v3	2	750	July 19, 2021
Passing object as parameter to a second page ionic-v3	3	6832	May 1, 2017
Can't figure out how to parse Json URL ionic-v3	3	1739	October 9, 2017
How to pass data from 1 page to another using navigation in Ionic 4? ionic-v3	25	103978	July 19, 2021

How to parse the json params value and show in page?

Related topics