CODEWITHSUNDEEP
angular
Mike3355
Mike3355

Reputation: 12101

getting a object with HttpClient angular 4 and call it a component

I am out of practice and trying to brush up on Angular. I want to return an object and render it in the HTML file.

service:

@Injectable()
export class NameService {

    url:string = "";

  constructor(private http: HttpClient) { }


    public getActivities(): Observable<UserModel> {
        return this.http.get(this.url);
    }


}

component:

export class NameComponent implements OnInit {

    users:UserModel;

  constructor(private nameService: NameService) { }

  public getUsers(){
      this.users = this.nameService.getActivities()
          .subscribe(res => {this.users = res});
  }

  ngOnInit() {
      this.getUsers();
  }

error Type 'Subscription' is not assignable to type 'UserModel'.

and

Type 'Observable<Object>' is not assignable to type 'Observable<UserModel>'.

HTML:

<ul>
        <li *ngFor="let user of users; let i = index">
            {{i + 1}} - {{user.id}}
            {{i + 1}} - {{user.first_name}}
            {{i + 1}} - {{user.last_name}}
            {{i + 1}} - {{user.email}}
            {{i + 1}} - {{user.ip}}
        </li>
    </ul>

and the JSON:

{
    "id": 11,
    "first_name": "Blakelee",
    "last_name": "Gillingham",
    "email": "[email protected]",
    "gender": "Female",
    "ip_address": "234.175.225.8"
}, {
    "id": 12,
    "first_name": "Tally",
    "last_name": "Loraine",
    "email": "[email protected]",
    "gender": "Female",
    "ip_address": "50.20.33.244"
},

I am using Angular 5 but using angular 4 practices because it will break my other application in do so.

-----------------Update 1-------------------

I added users:UserModel[]=[];

enter image description here

Then I added

public getActivities(): Observable<UserModel[]> {
        return this.http.get<UserModel[]>(this.url);
    }

The ide stopped complaining but now I am back the the error:

No provider for HttpHandler!

------------------Edit 2------------------------

enter image description here

Upvotes: 0

Views: 566

Answers (2)

AVJT82
AVJT82

Reputation: 73367

The issue is, that what HttpClient returns is an Object, so the error message is correct. You want to tell Angular that your response is of type UserModel, not of type Object. Besides that, you are getting an Array of UserModel's (I assume it's a typo in your question). So your request should look like this:

public getActivities(): Observable<UserModel[]> {
    return this.http.get<UserModel[]>(this.url);
}

Also your subscribe in component would look like Sajeetharan pointed out:

public getUsers(){
  this.nameService.getActivities()
    .subscribe(res => this.users = res);
}

EDIT: And in component declare your users as

users:UserModel[] = [];

Read more about the (not so new) HttpClient and typechecking: https://angular.io/guide/http#typechecking-the-response

EDIT 2:

As for the followup error, make sure you have imported the correct module (HttpClientModule) and declared it right after BrowserModule: Error: No provider for HttpHandler in angular2

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222672

Change it as following,

export class NameComponent implements OnInit {

    users:UserModel[]=[];

  constructor(private nameService: NameService) { }

  public getUsers(){
     this.nameService.getActivities()
          .subscribe(res => {this.users = res});
  }

  ngOnInit() {
      this.getUsers();
  }

Upvotes: 0

Related Questions