CODEWITHSUNDEEP
angular
Jaccs
Jaccs

Reputation: 1072

Http get response no populating in subscribe

In angular5 working with http calls, made one service,

app.service.ts

userDetail(userName) {
    return this.http
      .get(this.bioUrl + userName)
      .map(res => res.json());
  }

detail.component.ts

this.appService.search(this.searchTerm$)
  .subscribe(results => {
    this.results = results.results;
    this.result = results.items[0];
    console.log(results);
    console.log(this.result);
    console.log(this.result.owner.login) // Getting error


    this.appService.userDetail(this.result.owner.login) //Getting error
      .subscribe(bioData => {
        this.bioData = bioData;

        console.log(bioData);
      })

    this.appService.repoSearch(this.result.owner.login)
      .subscribe(repos => {
        this.repos = repos;

        console.log(repos);
      })
});

error TS2339: Property 'owner' does not exist on type 'Object'.

Sometimes compiling done nicely, but when executing calls console errors happening. Angular Build is not happening getting the above error.

Can someone help me to achieve?

Thanks,

Upvotes: 0

Views: 1193

Answers (2)

mangeshbhuskute
mangeshbhuskute

Reputation: 140

First of all, make API call as async i.e use Observable.

  • Import observable rxjs

  • userDetail(username): observable {}

Angular Http request support default JSON further as a response, so you can remove map function

Now in view component write,

{{ bioData | json}}

I have updated the example have a look,

app.apiService.ts:

userDetail(userName): Observable<any>{
    const url = `${this.url}/user/login`+userName;
    return this.http.get(url, { headers: "If require" })
  }

app.component.ts:

method(){
  this.appService.userDetail(this.result.owner.login) //Getting error
      .subscribe(bioData => {

            /* for testing purpose, we will create our own response */

            /* array response */
            bioData = [{
                "name": "User Name",
                "age": "23"
            }]

            /* object response */
            bioData = {
                "name": "User Name",
                "age": "23"
            }

        this.bioData = bioData;
      },
      error => { 
        console.log("Error occur while api call")
      })
}

app.component.html

  • to validate you have receive print api row response

    {{bioData | json}}

  • if response if array then you have write

    {{user.name}}

    {{user.age}}

    <div *ngIf="bioData">
      <p>{{bioData.name}}</p>
      <p>{{bioData.age}}</p>
  </div>

Upvotes: 1

David
David

Reputation: 34435

Since you are using map(res => res.json()) I assume that you use the old, deprecated Http class instead of the new HttpClient (You should switch over if you are startign a new project)

Your issue occurs because the type returned by res.json() is object, which does not contain any properties.

You need to explicitly declare the return type of the userDetails method

userDetail(userName) : Observable<any> { //Just to make it clear
    return this.http
      .get(this.bioUrl + userName)
      .map(res => res.json() as any); //<== as any
  }

You can also declare the type of retrieved data in your subscribe method

this.appService.search(this.searchTerm$)
  .subscribe((results : any)=> {

Upvotes: 0

Related Questions