parse Instagram JSON with jQuery

Question

I am using jQuery to parse a user's latest Instagram image like this:

     $.getJSON(instagram_url, function(data) {
      var latestPic = data.images;
      console.log(latestPic);
      });

But get an error message in the dev tools saying

XMLHttpRequest cannot load https://api.instagram.com/v1/users/{user_id}/media/recent/?access_token=ACCESS_TOKEN. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I am not sure what this means, since I get a json response when I paste my url into the browser. Does anyone know how to deal with this properly?

Thanks in advance

That is a security feature to stop people using other people's website data without permission. Either get permission (or request it from your server instead of your browser app ;)) — iCollect.it Ltd, Dec 28 '16 at 14:51
@GoneCoding Thank you for the quick reply, but the error is due to the user_ID I picked (123456). So I replaced that fake ID with my own ID and now you should be able to see my situation — boehmatron, Dec 28 '16 at 14:57
I mean get permission to use their API :) Some severs can dynamically enable cross domain access based on the request credentials. — iCollect.it Ltd, Dec 28 '16 at 14:58
The permission is not the problem in my case. I get a resonse in my dev tools but I can not access the JSON object properties. Any ideas how to do this? — boehmatron, Dec 28 '16 at 14:59
The permissions is entirely your problem. See the question I marked as duplicate for more information about the issue. As Instagram supports JSONP, [this answer](http://stackoverflow.com/a/21948020/519413) specifically will solve your problem. — Rory McCrossan, Dec 28 '16 at 15:03

score 0 · Answer 1 · answered Dec 28 '16 at 14:59

0

this is a Cross Origin problem, just include "callback=?" in the URL.

or use $.ajax() with "jsonp":

$.ajax({
    url: Url,
    method: 'GET',
    dataType: 'jsonp',
    data: apiData,
    success: handleData
})

answered Dec 28 '16 at 14:59

Abdelaziz Mokhnache

4,269
3
25
35

score 0 · Answer 2 · answered Dec 28 '16 at 14:59

You can get around this by using JSONP (instagram supports it). see https://www.instagram.com/developer/endpoints/

https://api.instagram.com/v1/tags/coffee/media/recent?access_token=ACCESS-TOKEN&callback=myCallBackHandler

Server will respond with

myCallBackHandler({
    ...
});

define a function called myCallBackHandler and put your logic in that. Your function will be invoked with response JSON

parse Instagram JSON with jQuery

2 Answers2