CODEWITHSUNDEEP
jqueryapijsonpinstagram
GeordieDave1980
GeordieDave1980

Reputation: 599

Pulling information from Instagram api using JQuery

So lately I've been trying out making requests to the Instagram API via ajax and using jquery. I seem to be having a little trouble though. I am trying to pull information available from the JSON array that comes via the GET request and can only seem to access a small part of the array and everything else comes in as either undefined or blank. Here is the code i'm using:

$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.instagram.com/v1/tags/olympics/media/recent?client_id={clientid}",
success: function(response) {
  for (var i=0; i<25; i++)  
  {
    $("#photos").html(response.data[i].comments.from.username);
  }

  }
});

Just using the {clientid} to represent where that would go and the test information is supposedly coming from data[i].comments.from.username however this is not working and I'm drawing blank. I have used JSFiddle to try and figure out where I'm going wrong but with no success.

Has anyone got any ideas on how to get past this hurdle? I've not had any issues with any of the other API's i've used only this one. Any code that may help would be good too!

Thanks!

Upvotes: 2

Views: 4996

Answers (2)

Jeemusu
Jeemusu

Reputation: 10533

Your code was sound, but the problem is that your viewing the page from your computers file system file://....../index.html which will not work for cross domain requests.

You must run your code from a hosted environment http://localhost/..../index.html since ajax makes http requests, and these requests must go to the same domain/server.


You will probably also have to set the 'WEBSITE URL' in your instagram app (on instagrams website), which the instagram API will use to authenticate your requests against your client_id to ensure they are coming from the correct domain. Simply put, you will have to host your files on the same domain you specify in your app on the instagram website, or the requests will fail.

**UPDATE**
Actually that last bit doesn't seem to be true, while some API's require you to host the files on the same domain specified within the app, instagram does not.

Just make sure your running your scripts from a hosted environment.

Upvotes: 2

xdazz
xdazz

Reputation: 160833

Try appending &callback=? to the url.

url: "https://api.instagram.com/v1/tags/olympics/media/recent?client_id={clientid}&callback=?",

Upvotes: 5

Related Questions