Simple Instagram Api get?

Wow I'm really having a hard time getting acquaintance with JSON + API's, even after watching multiple P5js tutorials after each other. Mostly I get the example tutorial running and then I try to change it to work for my project but then it fails miserably. So well I'm going to throw this super simple code on to be shown what I did wrong this time again.

I want to fetch data from the instagram api. The link I used works and gives me the correct JSON response. The browser P5js sketch doesn't do anything at all. Token is correct aswell.

code:

var apitags   = 'https://" + "api.instagram.com/v1/tags/';
var query     = 'kaorikondo';
var apitoken  = '?access_token=correct token';
var url = apitags + query + apitoken;


function preload() {
  loadJSON(url);

}
function setup() {
  noCanvas();
  var tags = url.data[1].name;
  console.log(url.data[1].name);
  console.log(tags);
  createP(tags);

}

function draw() {
}

JSON output:

{"data": {"name": "rainbows", "media_count": 1577013}, "meta": {"code": 200}}

CONSOLE:

nothing.

My suspicion is calling the wrongurl.data... line, I tried so many different things but no response...

Answers

  • Did you try 0?

  • Jep, 0, 1, 2 and even -1 (don't know why but was desperate)

  • you aren't assigning the output of loadJSON() to anything. see the reference.

  • edited January 2018

    I redid it based on this example.

    But still nothing, I just don't get how I don't get it :/ #-o

    var url = "https://"+"api.instagram.com/v1/tags/rainbows?access_token=correcttoken";
    
    function setup() {
      noCanvas();
      loadJSON(url, gotData);
    }
    
    function gotData(data) {
      var name = data.name;
    
      for (var i = 0; i < name; i++) {
        createElement('h1', name);
        createP(name);
      }
    }
    console.log(name);
    

    this is the json structure I get from Instagram:

    {
       "data": {
            "name": "rainbows", 
            "media_count": 1577178
    }, 
            "meta": {"code": 200}
    }
    
  • @kfrajer I understand that this is the basic construction and indeed your example seems to work. But this is not similar to my example (or I'm I wrong?). But using the var mydata = 'myinstagramauthlink'; And then calling for it doesn't work. I can read data from a file and from an array of data. But when I want to use a remote api (the instagram one) I seems to fail.

  • What output do you get from console.log(data) right when gotData() gets called? Have you checked the content of this object?

    Kf

  • edited January 2018

    Hi, For this example problem:

    var url = 'linktoinstagramwithtoken';
    
    function setup() {
      noCanvas();
      loadJSON(url, gotData);
    }
    
    function gotData(data) {
      var name = data.name;
    
      for (var i = 0; i < name; i++) {
        createElement('h1', name);
        createP(name);
      }
    console.log(name);
    console.log(data);
    console.log(url);
    console.log(data.name)
    }
    

    all console.log output in the console of firefox running on a mamp localhost.

    undefined                                                                                     sketch1.js:17:3
    Object { data: {…}, meta: {…} }                                                       sketch1.js:18:3
    https:// api.instagram.com/v1/tags/rainbows?access_token=       sketch1.js:19:3
    undefined                                                                                      sketch1.js:20:3
    

    Hi! I get data! but when I do console.log(data.name or data[i].name) I get undefined again?

  • Can you post the result of the API call, the returned json? I think the problem is the parsing but without registering for an API key we can't see the data.

    Format it as code.

  • edited January 2018

    this is the full adress or api call. I'm going to remove it tomorrow evening.

    [mod edit: url with api keys deleted, data below]

  • it's just this.

    {"data": {"name": "rainbows", "media_count": 1579075}, "meta": {"code": 200}}
    
  • Answer ✓

    so your variable is called data. that contains a structure called data which contains a name. i'd try data.data.name.

    var url = "...";
    
    function setup() {
      noCanvas();
      loadJSON(url, gotData);
    }
    
    function draw() {
      background(200);
    }
    
    function gotData(json) {
      var name = json.data.name;
      alert("name: " + name);
    }
    

    i've renamed your data var to 'json' to make it clearer. and removed all the createElement() stuff (because javascript).

  • @koogs thanks for helping so much! I think I'm getting the hang of this. small question. Does it matter that the function gotData(json) is after the draw function?

Sign In or Register to comment.