Including API key in the header :(

p5.js Coding Questions
1

I want to use API but I’m not familiar with JSON and API :frowning:
The site said me that I shoud include my apikey in the header but I don’t know how.

function preload(){
  let url1 = "https://static.api.nexon.co.kr/fifaonline4/latest/spid.json";
  
  httpDo(
    url1,
    {
      method: 'GET',
      // Other Request options, like special headers for apis
      headers: { authorization: apikey},
      datatype: 'json'
    },
    function(res) {
      spid = res;
    }
  );
}

function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(255);
  fill(0);
  console.log(spid[0]);
}

The cosole says
Uncaught TypeError: Cannot read property ‘0’ of undefined (sketch: line 28)
TypeError: Failed to fetch

I thought httpDo is the way to include my apikey in the header but,

Does anyone know how to include apikey in the header?
And the structure of file is

제이슨
제이슨647×633 20.3 KB

2

Every API is different, there’s no single way to provide an API key. It’s up to the designer of the API. So we can’t tell if your code fetches the JSON as intended unless you share a link to the API documentation.

The code has another potential problem as-well; the variable spid may not be available when draw is called. (Like I mentioned last time.) You can see one possible solution to that problem in the documentation (the code right below the comment // wait until the data is loaded).

3

I’m suspicious that httpDo(), httpGet() & httpPost() don’t take advantage of preload().

Therefore the execution can reach setup() & even draw() and the loading isn’t finished yet!

That’s why your console.log(spid[0]); fails, b/c spid[] array hasn’t been initialized by the success callback function (res) { spid = res; } within httpDo().

According to the httpDo()'s example you seem to be doing it right by including a headers property:

But given I don’t have your API Key, I’ve written a sketch to get the file “spid.json” via a CDN proxy.

If you wish you can take a look at it:

4

Thanks for your answer :slight_smile:
Oh, I didn’t expect preload() doesn’t work for httpDo()

I add if(spid) in the draw func to solve this porblem, but I got TypeError: Failed to fetch and still I can’t print spid[0] in my console :frowning:

I read your code and I have some questions.
Do you get the data without apikey? Is it possible?

5

Thanks for your answer :slight_smile:

https://developers.nexon.com/fifaonline4/guides#slink7
This is the site that I want to get the api and I think it’s hard for you to interpret because it’s in Korean

And I add if(!spid) return; to solve the another problem
Now I get only TypeError: Failed to Fetch

6

It means download has failed!

Well, if my online sketch is running OK it means it’s fetched “spid.json” successfully via a proxy CDN.

However, I’ve used regular loadJSON() instead of httpDo().

7

In console, I get error
“Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.”
I think this is the reason that the download has failed
I google it and now I know that this is the problem of CORS policy but I can’t find the solution of this.

8

Is an API key even needed? This works for me:

let spid;

function preload() {
  spid = loadJSON('https://static.api.nexon.co.kr/fifaonline4/latest/spid.json');
}

function setup() {
  console.log(spid[0]);
}

Resulting in this output:

Object {id: 101000001, name: "데이비드 시먼"}
 id: 101000001
 name: "데이비드 시먼"
9

Using a local server just the raw URL was enough here.

But it runs into a CORS block when the sketch is served on Bl.ocks.org, unless I use a proxy site such as YaCDN.org.

10

Weird. :thinking: My example above works on https://editor.p5js.org in Safari 13.1.1 and Chrome 83.