Simple Instagram Api get?

Layzfat

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...

koogs

Did you try 0?

Layzfat

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

koogs

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

Layzfat

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

var name = data.data.name;

http://p5js.sketchpad.cc/sp/pad/view/Gknf6KoxZm/latest

Kf

Layzfat

@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.

kfrajer

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

Kf

Layzfat

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?

koogs

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.

Layzfat

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]

koogs

it's just this.

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

koogs

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).

Layzfat

@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?

koogs

No