JSONP Requests in Ionic 2?

Ionic Framework ionic-v3
1

Been stuck on this for a few hours, feel like I’m missing something really simple.

Made a blank ionic project and I need to pull data from a url spitting out JSONP.

Here’s what my home.ts looks like:

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Http, Jsonp } from '@angular/http';
import 'rxjs/add/operator/map';


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

export class HomePage {

  constructor(public navCtrl: NavController, platform: Platform, public http: Http, public jsonp: Jsonp) {

    platform.ready().then(() => {

    this.jsonp.request('<the_url>?callback=JSONP_CALLBACK', { method: 'Get' })
          .map(res => res.json())
          .subscribe(
              (data) => {
                  console.log(data);
              },
              (error) => {
                  console.log(error);
              });
    }
  }
  parseData(data) {
      console.log(data);
  }
}

However I keep getting the error:

Uncaught ReferenceError: parseData is not defined(…)
(anonymous function) @ json.xsl?callback=ng_jsonp.__req0.finished:2

and

Response
_body: "JSONP injected script did not invoke callback."
headers: Headers
ok: true
status: 200
statusText: "Ok"
type: 3
url: "< the_url >?callback=ng_jsonp.__req0.finished"
proto: Body

I’m not sure exactly where to put the callback. The only solution I’ve been able to come up with was putting this in index.html

  <script>
    function parseData(data) {
    console.log(data);
  }
  </script>

But that’s not really useful. Any ideas?

2

Hi,

Did you find a solution?

I am on the same point.

Thanks

3

Is the JsonpModule included in your app module’s imports?

4

I used the Jsonp Module to no avail. Other JSONP streams worked but we were having issue with the client’s stream so I just ended up using a jQuery solution: