current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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

share|improve this question
up vote 1 down vote accepted

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());
  }
        }
    }
share|improve this answer
    
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. – Jozzy91 2 days ago
    
my bad on this.data and onInit. I'll correct. Console.log the response and data....tell me what you get – deek 2 days ago
    
I assume you left out the @Component decorator code from your example – deek 2 days 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 2 days ago
    
import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; – Jozzy91 2 days ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.