Combine JSON data with Arrays, TypeScript (Ionic 3)

Question

I am trying to include some data as string in one of my access modifiers (public pieChartLabels) which is an array. I've been checking with console.log what I was getting from my provider, and it works fine, but I just can't make it work when I try with the modifiers.

I have understood that functions such as ionViewDidLoad() are executed until the modifiers are ready to be used, therefore I used my provider inside the array to get JSON data.

JSON:

{
   "name": "progress",
   "overall": [
     "30",
     "5",
     "3",
     "62"
   ]
}

HTML:

<ion-content padding class="ionContent" *ngFor="let p of allProducts">
  <div style="display: block" class="pieChart">
    <canvas baseChart height="50%" width="50%"
      [data]="p.overall"
      [labels]= "pieChartLabels"> <!--I want to include a number after the label-->
    </canvas>
  </div>
</ion-content>

TypeScript:

export class LoginPage {
  public allProducts = [] as any;
  public percentages = [] as any;
  public newPercentages = [] as any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private screenOrientation: ScreenOrientation, private dataProvider: DataProvider) {
  }

  ionViewDidLoad() {   // As soon as the page is loaded this executes     
    this.dataProvider.getProducts()
      .subscribe((Response: Array<any>) => {
        this.allProducts = [Response];    // Getting data as array for HTML
        this.percentages = Response;      // Getting data as object
        console.log("First", this.allProducts);
        console.log("Second", this.percentages.name);
      });
  }

  ionViewDidEnter(){  // Executes after ionViewDidLoad()
    console.log("I want this: ", JSON.stringify(`${this.percentages.overall[0]}`));
    console.log("Final Test: ",JSON.stringify(`${this.dataProvider
      .getProducts().subscribe((Response: Array<any>) => {
        this.newPercentages = Response;}),this.newPercentages.name}`),this.newPercentages.overall)
  }

  public pieChartLabels:string[] = [   // <-----HERE IS MY PROBLEM!
    'Propuestas Originales Cumplidas'+JSON.stringify(`${this.dataProvider
      .getProducts().subscribe((Response: Array<any>) => {
            this.finalPercentages = Response;}),this.finalPercentages.overall[0]}`)+'%',
}

What I get in the console.log is exactly what I expect:

[app-scripts] [01:46:16] console.log: First [object Object]
[app-scripts] [01:46:16] console.log: Second progress
[app-scripts] [01:46:16] console.log: I want this: "30"
[app-scripts] [01:46:16] console.log: Final Test: "progress" 30,5,3,62

But what I get in my simulator is "Undefined", as if the value of finalPercentages wasn't stored.

Simulator Screenshot

The output that I want is "Propuestas Originales Cumplidas 30%".

What can I do? Also, is there a way to combine it in HTML instead? Something like [labels]="source1,source2"?

just noted you use a lot of types as "any" - this is generally speaking bad habit. Either don't use any or (better) actually start defining types - this will help in your project for sure! — Sergey Rudenko
– Sergey Rudenko, Commented Aug 14, 2018 at 15:53

Phonolog · Accepted Answer · 2018-08-14 15:20:09Z

1

Why don't you set your pieChartLabels in the subscribe callback of your provider?

Code might look something like this:

export class LoginPage {
      public allProducts = [] as any;
      public percentages = [] as any;
      public newPercentages = [] as any;
      public pieChartLabels = []; // If pieChartLabels should have a default value, set it here


      ionViewDidLoad() {      
        this.dataProvider.getProducts()
          .subscribe((Response: Array<any>) => {
            this.allProducts = [Response]; 
            this.percentages = Response;
            // Set your pieChartLabels here 
            this.pieChartLabels = ['Propuestas Originales Cumplidas ' + this.percentages.overall[0] + '%'];
          });
      }              
}

answered Aug 14, 2018 at 15:20

Phonolog

6,5513 gold badges39 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arturo Over a year ago

I honestly don't know why I didn't think about that. That works perfectly. Thank you!

Collectives™ on Stack Overflow

Combine JSON data with Arrays, TypeScript (Ionic 3)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related