Add headers to ionic 2 provider

Ionic Framework ionic-v3
#1

Hi All,

Iv been looking at ways to access APIs and i have been following this tutorial:
http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/

My question is how to you add headers to the API Call? As i need to add two headers to it app-id and app-key as headers.

Thanks
Carl

#2

try something like this

import {Injectable} from ‘@angular/core’;
import {Http, Headers} from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

@Injectable()
export class Users {

userID:string = "TVRnNU1qWXpNREk9Ky06TWc9PQ==";

constructor(private http:Http) {
}

login(email, pass) {
    let body = JSON.stringify({"userID": this.userID, "email": email, "pass": pass});
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return new Promise(resolve => {
        this.http.post('https://api.XXXX.com/api.php', body, {headers: headers})
            .map(response => response.json())
            .subscribe(
                response => {
                    if (response) {
                        resolve(response);
                    } else {
                        resolve(false);
                    }
                }, error => {
                    resolve(false);
                }
            );
    });
}

}

1 Like
#3

This is what i have so far…

episode-service.ts

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

@Injectable()
export class EpisodeService {
  data: any;

  constructor(private http: Http) {
    this.data = null;
  }

  load() {
    if (this.data) {
      // already loaded data
      return Promise.resolve(this.data);
    }
    // don't have the data yet
    let body = JSON.stringify({});
    let headers = new Headers();
    headers.append('app-id', '');
    headers.append('app-key', '');
    headers.append('Content-Type', 'application/json');

    return new Promise(resolve => {
      // We're using Angular Http provider to request the data,
      // then on the response it'll map the JSON data to a parsed JS object.
      // Next we process the data and resolve the promise with the new data.
      this.http.post('http://twit.tv/api/v1.0/episodes?range=10', body, {headers: headers})
        .map(res => res.json())
        .subscribe(data => {
          this.data = data.episodes;
          // we've got back the raw data, now generate the core schedule data
          // and save the data for later reference
          //this.data = data;
          resolve(this.data);
        });
    });
  }
}

Removed keys for security reasons

However on the page it should display on i get a blank page

latest.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { EpisodeService } from '../../providers/episode-service/episode-service';

@Component({
  templateUrl: 'build/pages/latest/latest.html',
  providers: [EpisodeService]
})
export class LatestPage {
    public people: any;

  constructor(public episodeService: EpisodeService){
    this.loadPeople();
  }

  loadPeople(){
    this.episodeService.load()
    .then(data => {
      this.people = data;
    });
  }
}

latest.html

<ion-navbar *navbar primary>
   <ion-title><img src="images/header.png" class="header"/></ion-title>
</ion-navbar>

<ion-content padding class="latest">
  
    <ion-list>
    <ion-item *ngFor="#person of people">
      <h2>{{episodes.id}}</h2>
      <p>{{episodes.episodeNumber}}</p>
    </ion-item>
  </ion-list>
  
</ion-content>
#4

Hi, do you solve the question?
I trying do this too.