Import $ http in constructor ($ http is not defined)

Question

Import $ http in constructor ($ http is not defined)

Navigation

#1 by (2 votes)

0

I am trying to make a request AJAX from Ionic , I have this html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Prueba AJAX
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <div center text-center>
    <button ion-button (click)="traerInfo()">
        Informacion ajax
    </button>
  </div>
</ion-content>

And I have the following .ts :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';

@Component({
    selector: 'page-prueba',
    templateUrl: 'prueba.html'
})

export class PruebaPage {

    constructor(public navCtrl: NavController, public alerCtrl: AlertController) {

    }

    traerInfo() {
        $http.get("https://www.w3schools.com/xml/ajax_info.txt")
        .then(function(response) {
            let alert = this.alerCtrl.create({
                title: 'Informacion obtenida!',
                message: response,
                buttons: ['Ok']
            });
            alert.present()
        });

    }
}

I'm getting an error that the variable $http is not defined. But I already tried including it in constructor :

 constructor(public navCtrl: NavController, public alerCtrl: AlertController, public http: $http)

Or even doing the same thing importing everything as explained here:

import { Http, Response } from '@angular/http';

And doing in the constructor:

constructor(public navCtrl: NavController, public alerCtrl: AlertController, public http: Http)

But it did not work either ...

My options ran out, thank you very much!

angularjs-2.0 ionic-framework ionic2

asked by Genarito 10.07.2017 в 22:20

source

1 answer

Sum of times sql server Error while traversing PHP associative array

score 2 · Accepted Answer

Your tests were almost close, the error you had was the way to invoke the method get; I will explain in detail what you should do

You must first import the library http and Response of angular

the Http calls and the Response gets the result

   import { Http, Response } from '@angular/http';

then add it to the constructor, and declare it

constructor(public navCtrl: NavController, public alerCtrl: AlertController , private http: Http) {

Finally you must change the line where you invoke the method get because it is already a objeto within the class and it would be something like

this.http.get("https://www.w3schools.com/xml/ajax_info.txt")

remember that when you make a line in the constructor you can do it in a conventional way which is to assign the variables inside the constructor and then execute a function; in the case of angular2 when doing a line as constructor(public navCtrl: NavController you are declaring in the class a variable navCtrl the type of visibility is Publica and assigning the object NavController

your code should be more or less like this:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
import { Http, Response } from '@angular/http';
@Component({
    selector: 'page-prueba',
    templateUrl: 'prueba.html'
})

export class PruebaPage {

    constructor(public navCtrl: NavController, public alerCtrl: AlertController , private http: Http) {

    }
    traerInfo() {
        this.http.get("https://www.w3schools.com/xml/ajax_info.txt")
        .map(function(response:Response) => {
             console.log(response.json());
            let alert = this.alerCtrl.create({
                title: 'Informacion obtenida!',
                message: response.json(),
                buttons: ['Ok']
            });
            alert.present()
        });

    }
}