Error using Http JSON AngularJS 2

Question

I'm trying to use the following code after trying several ways online tutorials I can not make it work.

..//
import {Http, HTTP_PROVIDERS} from 'angular2/http';

@Component({

    viewProviders: [HTTP_PROVIDERS],

    template: `
    ..//
    <div class="col-md-6 col-md-offset-3 well">

        <input type="button" class="btn btn-success btn-block"
        (click)="get()" value="Fetch Users">

        <hr>
        <ul>
           <li *ngFor="#user of users">
             Id: {{ user.name }} | Name: {{ user.name }} | JSON: {{ user | json }}
           </li>
        </ul>
    </div>

    ..//

export class Mov {

    //Inicio test http

    users: Array<Object>;
    http: any;

    //
    //constructor(@Inject(HttpFactory) http) {
    //constructor(http: Http) {
    constructor(http: Http){
         //
        this.http = http;
    }

    get(){
        this.http('resources/users.json')
        .map(res => res.json())
        .subscribe(users => this.users = users);
    }

obtain this error:

EXCEPTION: Error during evaluation of "click"

ORIGINAL EXCEPTION: TypeError: this.http is not a function

anyone can tell me I'm doing wrong, I'm sorry for my English.

dfsq · Accepted Answer · 2016-02-11 21:37:09Z

3

Well, as the error message states this.http is not a function, it's an object which has several methods. You need this.http.get() method:

this.http.get('resources/users.json')
    .map(res => res.json())
    .subscribe(users => this.users = users);

answered Feb 11, 2016 at 21:37

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

4 Comments

Angel Angel Over a year ago

this solves the problem, thanks, but I think also the response @PankajParkar

Angel Angel Over a year ago

I have no idea what to accept, I think the two helped with the error.

Angel Angel Over a year ago

I tried, as was the code unchanged, as published and your answer is the solution

dfsq Over a year ago

Yea, dilemma, feel free to accept whatever you you want, it's fine :)

Thierry Templier · Accepted Answer · 2016-02-13 09:14:47Z

3

Seems like somehow Http isn't get injected correctly. Use @Inject to inject Http dependency.

import { Component, Inject} from 'angular2/core';
//above code should be at start.

constructor(@Inject(Http) http: Http) {

@Inject is needed for acquiring dependency when not using Typescript for transpilation of JS.

edited Feb 13, 2016 at 9:14

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

answered Feb 11, 2016 at 21:16

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

7 Comments

Angel Angel Over a year ago

Maybe I doing something wrong that I add this import {Inject} from 'angular2/core'; and constructor(@Inject(Http) http: Http){ and obtain equal error

Pankaj Parkar Over a year ago

@AngelAngel may I know which angular2 version you are using?

Angel Angel Over a year ago

"dependencies": { "angular2": "2.0.0-beta.3",

Pankaj Parkar Over a year ago

@AngelAngel have you added rx.js, you need to add rxjs/add/operators/map because you are using map operator

Angel Angel Over a year ago

I have -> import 'rxjs/add/operator/map'; this refers to that? in this file

|

Collectives™ on Stack Overflow

Error using Http JSON AngularJS 2

2 Answers 2

4 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related