Ionic2 angular2 http get json from external api

Question

I am aware that this might be a noob question since I've seen more complicated stuff, but to understand the complicated I need to understand the easy stuff first.

I am trying to get the name from a JSON string from an api (laravel):

{"name":"Abigail","state":"CA"}

The code is created with a route which returns this (in laravel):

return response()->json([
    'name' => 'Abigail',
    'state' => 'CA'
]);

In ionic I got these files:

page.ts:

export class Page {
  constructor(public http: Http) {}
    getJson() {
      this.http.get('http://external.ip/api')
          .map(res => res.json())
          .subscribe(
          data => this.data = data
      );
    }
}

page.html:

<ion-header>
  <ion-navbar>
    <ion-title>App</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-content>
    <ion-list>
      <ion-item>
        <h3>{{data.name}}<h3>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-content>

I know this doesn't work, but I need help to get this working. I want to be able to add more names later on. And after that I want to be able to post data to the api (for example add a name or change a date).

deek · Accepted Answer · 2016-12-16 03:33:08Z

3

This should work assuming something runs getJson()( I added OnInit code to do that). Gave a quick example of a simple post request for ya too. You can subscribe to that post or leave it as is.

//Will need on OnInit to run getJson()
    import {Component, OnInit} from '@angular/core';


 export class Page implements OnInit {

  constructor(public http: Http) {}

data: any;

    getJson() {
      this.http.get('http://external.ip/api')
          .map(res => res.json())
          .subscribe(
          data => this.data = data;
      );
    }
//run getJson() at initial load
ngOnInit() {
 this.getJson();
}
     postJson(data:any) {
    let headers = new Headers({ 'Content-Type': 'application/json'});
    let options = new RequestOptions({ headers: headers });
    return this.http.post('http://52.11.14.57:4000/api/events', JSON.stringify(data), options)
      .map((res: Response) => res.json());
  }
        }
    }

edited Dec 16, 2016 at 3:33

answered Dec 16, 2016 at 1:18

deek

1,1051 gold badge9 silver badges28 bronze badges

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

11 Comments

Jozzy91 Over a year ago

Thank you very much for your reply, I think I made some progress, but now I get an empty white page. I changed "this.data: any;" to "data: any;". and "OnInit" to "ngOnInit" with "this.getJson". I excluded the post example for now since it was also giving errors. I've added some content to the html page but it will not be displayed.

deek Over a year ago

my bad on this.data and onInit. I'll correct. Console.log the response and data....tell me what you get

deek Over a year ago

I assume you left out the @Component decorator code from your example

Jozzy91 Over a year ago

The weird thing is I don't get an error from ionic serve. But in phpstorm it says the following when I hover "Page" in the line: "export class Page implements OnInit {": Property abstract from interface OnInit is not implemented. Can't find a solution to this if it is a problem at all.

Jozzy91 Over a year ago

import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map';

|

Collectives™ on Stack Overflow

Ionic2 angular2 http get json from external api

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related