How to retrieve objects from parse platform and show them using Typescript?

Question

I want to retrieve an object that stored in parse platform and I'm using ionic framework. so I wrote this code in Home.ts :

export class HomePage {
result: string = 'sample' ;

constructor(public navCtrl: NavController) {
Parse.serverURL = 'https://parseapi.back4app.com/';
Parse.initialize("MY_APP_ID", "MY_JS_KEY");
var GameScore = Parse.Object.extend("GameScore");
var query = new Parse.Query(GameScore);

query.get("wN9bVUA9Hu", {
  success: function(gameScore) {
    // The object was retrieved successfully.
     this.result = gameScore.get("score").toString();
     console.log(this.result);
  },
  error: function(object, error) {
    // The object was not retrieved successfully.
    // error is a Parse.Error with an error code and message.
  }
});
}

}

and object's id is = wN9bVUA9Hu, so that should retrieve the object's score which is 9. but as you see here : result

result didn't change in Home.html but in the console, it is 9.

here is my Home.html code :

<ion-header>
  <ion-navbar>
     <ion-title>
  Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
   <h4>{{result}}</h4>
</ion-content>

how can I solve this and show the retrieved object in Home.html ?

thanks.

Pace · Accepted Answer · 2018-07-23 18:04:39Z

I'm sorry, this should have been obvious to me but my eyes just slip over these things.

var func1 = () => console.log(this.result);
var func2 = function { console.log(this.result); }

These two statements are not the same. Where possible, your sanity will be improved if you use arrow functions (e.g. func1). They are newer to JavaScript so many examples you see will not include them.

In an arrow function this points to same object inside the function as it does outside. With the function syntax this is reassigned to something else depending on how it was called. So in your code, when you say this.result = gameScore.get("score").toString(); the problem is that this is not referencing the instance of HomePage.

If you need to keep the function syntax (a few libraries rely on reassignment of this) then you have to do something like...

const self = this;
query.get("wN9bVUA9Hu", {
  success: function(gameScore) {
     self.result = gameScore.get("score").toString();
  },
  error: function(object, error) {
    // The object was not retrieved successfully.
    // error is a Parse.Error with an error code and message.
  }
});
}

Pace · Accepted Answer · 2018-07-20 15:13:04Z

0

Angular wraps a number of the default input and output events (e.g. button clicks, http requests, etc.) inside of zones. This way, Angular knows when something happens, and it knows that since something happened it may need to update bindings.

However, some libraries (as it appears parse is doing here) will issue events that Angular hasn't wrapped and doesn't know about and so code can end up running outside of a zone. To fix this, you can manually put the code back into a zone.

Try changing:

  success: function(gameScore) {
    // The object was retrieved successfully.
     this.result = gameScore.get("score").toString();
     console.log(this.result);
  },

To be:

  success: function(gameScore) {
    this.zone.run(() => {
      this.result = gameScore.get("score").toString();
      console.log(this.result);
    });
  },

You will need to add private zone: NgZone to your constructor and import { NgZone } from '@angular/core'; to import NgZone.

5 Comments

Mohy Fahim Over a year ago

I did this but it said: Property 'zone' is declared but its value is never read.

Mohy Fahim Over a year ago

and also in console logged nothing

Mohy Fahim Over a year ago

I can't understand what's going on but I think your solution is true and I tried it in various ways, But it has not worked yet...

Pace Over a year ago

Can you add the full file for one of your attempts? Maybe on StackBlitz or something?

Mohy Fahim Over a year ago

stackblitz

Collectives™ on Stack Overflow

How to retrieve objects from parse platform and show them using Typescript?

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related