Converting HTTP response json into typescript Object in Angular8

Question

I am trying to create a typescript object from an HTTP response in angular8, But I receive an error:

ERROR ReferenceError: Profile is not defined at SafeSubscriber._next (app.service.ts:17) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)

My Profile.ts file is : here My app.service.ts file is: here

I construct a component class object with this service result and I also get the error

ERROR TypeError: Cannot read property 'name' of undefined

when I use it in the HTML file.

The console output for the statement in service file is:

{
  name: "somename",
  status: "sometext",
  bio: "sometext",
  email: "email",
  gitlab: "link",
  twitter: "link",
  instagram: "link",
  linkedin: "link",
  telegram: "link"

},

This is output accompanied by the errors.

My HTML code shortly is :

<p class="ui header">{{profile.name}}</p>

My component class file is: here

Adding an update to the above issue, Now, The console.log(this.profile) statement in service prints the data. But in the component, the data is not printed. I don't know why? — Sivaramakrishnan
– Sivaramakrishnan, Commented Jun 22, 2019 at 4:01

user2216584 · Accepted Answer · 2019-06-22 03:43:49Z

3

The issue is in getProfile() method of your AppService. You are returning this.profile from this method, instead, you should return an observable like this:

getProfile(): Observable<Profile> {
    return this.http.get(this.profileApiUrl) 
               .pipe(
                  map(pro => new Profile(pro))
               );
  }

Now in component inject this service in the component constructor like this:

//have a class variable
//this will be used in the template to render the profile
profile: Profile;
constructor(private _appService: AppService) {}

ngOnInit() {
 this._appService.getProfile().subscribe(pro => {this.profile = pro;});
}

Use a safe operator in the template -

<p class="ui header">{{profile?.name}}</p>

answered Jun 22, 2019 at 3:43

user2216584

5,6323 gold badges27 silver badges34 bronze badges

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

7 Comments

Sivaramakrishnan Over a year ago

It didn't work, I tried your changes, produces an additional error, "Profile is not a constructor".

user2216584 Over a year ago

@Sivaramakrishnan You have a constructor in your Profile class.

user2216584 Over a year ago

@Sivaramakrishnan share your updated code; The code I shared works for me. It is some other issue.

Sivaramakrishnan Over a year ago

The data are still not printed.

user2216584 Over a year ago

Let us continue this discussion in chat.

|

User3250 · Accepted Answer · 2019-06-22 04:04:25Z

0

You don't need extra code to map to Profile object. HttpClient would do it for you. You need to make few changes to service.ts as below:

getProfile(): Observable<Profile> {
    this.http.get<Profile>(this.profileApiUrl)
    .pipe(map((pro: any) =>{
      this.profile = pro;
      return pro
    });
  }
}

In Component:

ngOnInit() {
 this._appService.getProfile().subscribe(pro => this.profile = pro;);
}

And in you html:

<p class="ui header">{{profile?.name}}</p>

answered Jun 22, 2019 at 4:04

User3250

3,4536 gold badges34 silver badges69 bronze badges

Collectives™ on Stack Overflow

Converting HTTP response json into typescript Object in Angular8

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related