Search code examples
angularjscurlionic-frameworkionic2loopback

Ionic 2 AngularJs simple get request on loopback server


I'm trying to make a simple GET request from my Ionic 2 app to a server running Loopback API. Loopback uses a nice interface to show GET and POST commands and gives the curl command for it. Right now, for the data I want to access, the curl command is: curl -X GET --header 'Accept: application/json' 'http://IPADDRESS:3000/api/tests', where the IPADDRESS is the server's IP address.

In my Ionic 2 app I am trying to just make the app send a simple alert when a button is clicked, where the alert text is the data gathered from the server. I currently have alert(this.http.get("http://IPADDRESS:3000/api/tests"));, but then the alert just shows [object Object]. I know there is data for it to get since the Loopback side works. Here is my whole type script file:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';

/**
 * Generated class for the SignupPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-signup-page',
  templateUrl: 'signup-page.html',
})
export class SignupPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SignupPage');
  }

  existingUser() {
    alert(this.http.get("http://IPADDRESS:3000/api/tests"));
  }

  joinNow() {

  }

}

I am new to Ionic and AngularJS, so any and all help would be appreciated.


Solution

  • Not sure if this is what you want, but maybe try:

    this.http.get("http://IPADDRESS:3000/api/tests")
       .map(res => res.json())
       .subscribe(data => {
          console.log(data)
       });
    

    note that you have to import 'rxjs/add/operator/map' to use the .map operator