Subsrice data to Variable

Ionic Framework ionic-v3
1

I have a variable:
public myAccountData;
and this function

setmyAccountData(data){
    th=this.authServiceProvider.getData("userbyid/40").subscribe( myData => {
      this.myAccountData=myData; // this is not working i dunno why
    });
  }

here’s the getData function:

  public getData(type): Observable<any> {

    return this.http.get(apiUrl + type);

}

When runnin the get request with userbyid/40 on postman this is what i get
{"id":"40","firstname":"Kebbab","lastname":"Walid","email":"walid@kebbab.fr","username":"walid","password":"a665a45920422f9d417e4867efdc4fb8a04a1f3fff1fa07e998e86f7f7a27ae3","sexe":"","birth":"2018-04-11","telephone":"0","type":"ouvrier","emailverified":"0"}

But when i try to show the firstname on an html page using { { myAccountData.firstname } } its not working, i guess the problem have something to do with asynchrous data or something like that but i dont rly know, im a newbie x))

Error Log:

ERROR Error: Uncaught (in promise): TypeError: _co.myAccountData is undefined
View_MyaccountPage_0/<@ng:///AppModule/MyaccountPage.ngfactory.js:128:13
updateRenderer@http://localhost:8100/build/vendor.js:14342:20
checkAndUpdateView@http://localhost:8100/build/vendor.js:13866:5
callViewAction@http://localhost:8100/build/vendor.js:14211:21
execComponentViewsAction@http://localhost:8100/build/vendor.js:14143:13
checkAndUpdateView@http://localhost:8100/build/vendor.js:13867:5
ViewRef_.prototype.detectChanges@http://localhost:8100/build/vendor.js:11653:9
NavControllerBase.prototype._viewAttachToDOM@http://localhost:8100/build/vendor.js:51117:9
Tab.prototype._viewAttachToDOM@http://localhost:8100/build/vendor.js:77128:9
NavControllerBase.prototype._transition@http://localhost:8100/build/vendor.js:51197:13
NavControllerBase.prototype._nextTrns/<@http://localhost:8100/build/vendor.js:50918:40
F</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14974
onInvoke@http://localhost:8100/build/vendor.js:4982:24
F</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14901
F</c</r.prototype.run@http://localhost:8100/build/polyfills.js:3:10124
f/<@http://localhost:8100/build/polyfills.js:3:20240
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask@http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815
o@http://localhost:8100/build/polyfills.js:3:7887
F</h</e.invokeTask@http://localhost:8100/build/polyfills.js:3:16823
p@http://localhost:8100/build/polyfills.js:2:27646
v@http://localhost:8100/build/polyfills.js:2:27893

Stack trace:
c@http://localhost:8100/build/polyfills.js:3:19752
c@http://localhost:8100/build/polyfills.js:3:19461
f/<@http://localhost:8100/build/polyfills.js:3:20233
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask@http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815
o@http://localhost:8100/build/polyfills.js:3:7887
F</h</e.invokeTask@http://localhost:8100/build/polyfills.js:3:16823
p@http://localhost:8100/build/polyfills.js:2:27646
v@http://localhost:8100/build/polyfills.js:2:27893
 core.js:1350
2

Any error log would be very helpfull

3

Hi, thanks for your attention i updated the post

4

Can you provide the HTML too?
I think you are trying to bind to the firstname value in HTML of myAccountData (?), but on initialisation the parent isn’t defined yet, so it throws an error when trying to reach the sub value

try this: { { myAccountData?.firstname } }

5

DUDE ! YOU ROCK Been trying to make this work for daayyysss thanks !!!
Can you please explain me what was the problem?

6

When your MyaccountPage initially loads, your myAccountData would probably be like this:
myAccountData = ‘undefined’ (or maybe null)

So at this point when the HTML template tries to access myAccountData.firstname, the myAccountData isn’t (fully) there yet. So it can’t go deeper into the ‘firstname’ value. When you do try at that point, you’ll get that error.

When using the ‘?’ the value will be tested first before letting “the html” go “deeper”. So, because of myAccountData will result in false when checking with the ‘?’. It never tries to acces the sub value of ‘firstname’, and therefor you’re not getting that error anymore.

7

Here you can find some more info about this.

1 Like
8

@bilow I have the same problem in another page, but this time its not to show the content of the variable but to check if its true or false how can i do that ?..i mean how to do this in typescript?

9

Normally it would be the same, but I can’t make much of it right now. Just create a new topic, tag me, and add some of your code with context. I’ll try to look at it.