How to get json using a jsonp request

Question

I'm trying to use instagrams api, without having to authenticate. if I go to: https://www.instagram.com/explore/tags/chicago/?__a=1

I get a json response. I'm trying to build an angular 4 provider that returns that data.

getInsta(term){
    return this.jsonp.request(this.url+term+'/?__a=1&callback=__ng_jsonp__.__req0.finished')
      .map(res => {
        console.log(res.json());
      });
  }

I've tried "callback" and "c". I've tried JSONP_CALLBACK.

I get the error of:

"SyntaxError: Unexpected token ':'. Parse error. - In chicago:1"

and

"JSONP injected script did not invoke callback"

If I click on the unexpected token error, it brings me to the response with all the json data in it. So that means it's coming through, I just cant access it!

Any idea how i can get around this?

Here is a screenshot of the error and when clicking on the error

@SharikovVladislav in terms of what? I get the 2 errors i listed above, if I click on the token error and look at what line the actual error is on, it brings me to the jsonp script which has the exact data in it as if you were to visit the url on your browser. — Michael Christopher Martire, Aug 29 '17 at 05:00
Maybe [this answer](https://stackoverflow.com/a/40027481/6611700) should help... the answer is for Angular 2 but much of it should apply to Angular 4 as well — riyaz-ali, Aug 29 '17 at 06:32

score 2 · Answer 1 · edited Aug 29 '17 at 05:16

2

JSONP is a method to fetch data cross origin, it works because it injects a script tag to the body when the src of the file contains the callback function name.

<script src="http://ani.site.com/api/?callback=myGlobalFunc">

And it assumes that there is a global func on the window with the name myGlobalFunc.

The response of that call gonna look like: myGlobalFunc({data: 'data1'}). Invocation of the function with one argument which is the data.

In your case, Instagram API return JSON not JSONP.

There for you can't use that mechanism.

edited Aug 29 '17 at 05:16

Pritam Banerjee

17,953
10
93
108

answered Aug 29 '17 at 05:13

felixmosh

32,615
9
69
88

@pritambanerjee Please look at my updated question. I understand the difference between json and jsonp, but the data is actually coming through, i just cant use it inside my app. – Michael Christopher Martire Sep 08 '17 at 02:26
Ok, now it looks like u fetched via jsonp, but Instagram is returning json, align your request method to the actual response type. – felixmosh Sep 08 '17 at 05:24
this is the error im getting now: XMLHttpRequest cannot load https://www.instagram.com/explore/tags/chicago/?__a=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. – Michael Christopher Martire Sep 08 '17 at 15:28
Ok, so as I said JSONP was invented in order to overcome Cross origin, so just use it. – felixmosh Sep 08 '17 at 22:09

How to get json using a jsonp request

1 Answers1