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

Question

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": "bgillinghama@engadget.com",
    "gender": "Female",
    "ip_address": "234.175.225.8"
}, {
    "id": 12,
    "first_name": "Tally",
    "last_name": "Loraine",
    "email": "tloraineb@marriott.com",
    "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[]=[];

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------------------------

Hey man, mind marking answer if (either) helped? ;) – AT82 Nov 16 '17 at 18:57 — AT82, Nov 16 '17 at 18:57

AT82 · Answer 1 · 2017-11-08T18:29:31.717

1

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

edited Nov 08 '17 at 18:29

answered Nov 08 '17 at 17:50

AT82

71,416
24
140
167

I did this and now it says `No provider for HttpHandler!` and I added it to the module too. Thank you for the help. Where is the cat? – Mike3355 Nov 08 '17 at 18:02
` Property 'id' is missing in type 'UserModel[]'.` and Type 'Observable' is not assignable to type 'Observable – Mike3355 Nov 08 '17 at 18:12
You are still having typing issues, see that you have on all places marked the incoming data as ``. The other one is marked as an OBJECT of type `UserModel`. And my kitties are doing fine thanks :D Sleeping somewhere, preparing themselves for their nightly adventures (it's night soon on this side of the world) – AT82 Nov 08 '17 at 18:14
You had the component variable `users` declared as an object, mark it as `users:UserModel[];` instead (updated answer) – AT82 Nov 08 '17 at 18:18
Have you also updated the service? Declared `` on both the return type and the get request? This should work and not spit out such errors if all your types match. – AT82 Nov 08 '17 at 18:26
Check this according to your error now, that you have imported correct module and that it's on the correct place: https://stackoverflow.com/a/46001121/7741865 – AT82 Nov 08 '17 at 18:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158537/discussion-between-drew1208-and-ajt-82). – Mike3355 Nov 08 '17 at 18:30

Sajeetharan · Answer 2 · 2017-11-08T17:41:03.573

0

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();
  }

edited Nov 08 '17 at 17:41

answered Nov 08 '17 at 17:35

Sajeetharan

216,225
63
350
396

`Type 'Observable – Mike3355 Nov 08 '17 at 17:38
what about the udpated answer – Sajeetharan Nov 08 '17 at 17:41
` Type 'UserModel' is not assignable to type 'UserModel[]'.` – Mike3355 Nov 08 '17 at 17:42
so its not an array,try users:UserModel=[]; – Sajeetharan Nov 08 '17 at 17:43
you are missing something – Sajeetharan Nov 08 '17 at 17:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158533/discussion-between-sajeetharan-and-drew1208). – Sajeetharan Nov 08 '17 at 17:47

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

2 Answers2