reading API problem: Cannot read property 'responseText' of undefined

iamlukesky

Hi, I'm trying to use a trafiklab.se API. The url im putting into loadJSON() works fine when put into the web browser, but with loadJSON() i get the error:

Script error.
5209: Uncaught TypeError: Cannot read property 'responseText' of undefined

This is the error shown in the node-webkit errorlog of the p5js browser:

Uncaught typeahead.json?key=MYAPIKEY&searchstring=slussen&callback=reqwest_144658152…:1
SyntaxError: Unexpected token :
p5.js:5209 Uncaught TypeError: Cannot read property 'responseText' of undefined
p5.js:5209 success
p5.js:5067 27.script.onload.script.onreadystatechange

And this is the code that loads the json

    var url = "http:/ /api.sl.se/api2/typeahead.json?key=MYAPIKEY&searchstring=" + "slussen";
    loadJSON(url, platsuppslag, "jsonp");

The syntax error thing made me think that the API response might be wrongly formatted somehow, but according to jsonlint it's all good.

This is only my second attempt at using an API, so I have no idea where to start with this, any help greatly appreciated :)

edit: the forums does something weird with the url, it looks fine in post preview but not in the post itself :S

blindfish

Without the API key it's hard to test against your data source. Works fine with sample data:

function preload() {
    // test data url - space added to avoid mangled code
    var url = "http:/ /jsonplaceholder.typicode.com/posts/";
    loadJSON(url, onSuccess, onError, "jsonp");


}

function setup() {
    createCanvas(600, 400); 
}


function onSuccess(data) {   
    console.info("success", data);
}

function onError(error) {
    console.info("error", error);
}

iamlukesky

That's true. I tried your example in the p5js editor and works no problems.

This is the code I run to test (with API key):

function setup() {
  noCanvas();

    var url = "http:/ /api.sl.se/api2/typeahead.json?key=e78b3a6672a14d479fa56e5d19b64ce2&searchstring=" + "slussen";
    loadJSON(url, platsuppslag, "jsonp");
}

function platsuppslag(data){
    println("got data!");
    println(data);
}

Chrisir

in which line do you get the error?

where do you use 'responseText' ?

Chrisir

what do you get here

println(data);

GoToLoop

// https://forum.Processing.org/two/discussion/13393/
// reading-api-problem-cannot-read-property-responsetext-of-undefined

// 2015-Nov-04

const URL = 'http:/' + '/api.sl.se/api2/typeahead.json' +
            '?key=e78b3a6672a14d479fa56e5d19b64ce2' + '&searchstring=slussen';

var json;

function preload() {
  json = loadJSON(URL);
}

function setup() {
  noCanvas();
  console.info('Got data!\n', json);
}

// XMLHttpRequest cannot load http://api.sl.se/api2/typeahead.json
// ?key=e78b3a6672a14d479fa56e5d19b64ce2&searchstring=slussen.

// No 'Access-Control-Allow-Origin' header is present on the requested resource.
// Origin 'http://p5js.org' is therefore not allowed access.

GoToLoop

// https://forum.Processing.org/two/discussion/13393/
// reading-api-problem-cannot-read-property-responsetext-of-undefined

// 2015-Nov-04

const CORS_PROXY = 'https:/' + '/CrossOrigin.me/',
      URL = 'http:/' + '/api.sl.se/api2/typeahead.json',
      QUERY = '?key=e78b3a6672a14d479fa56e5d19b64ce2' + '&searchstring=slussen';

var json, slussenData;

function preload() {
  json = loadJSON(CORS_PROXY + URL + QUERY);
}

function setup() {
  noCanvas();

  console.info('Got data!');
  console.log(json);

  slussenData = json.ResponseData[0];
  console.info('Slussen (Stockholm):');
  console.log(slussenData);
}

blindfish

@GoToLoop: the error does look CORS related, but the whole point of jsonp is that it should work without CORS set on the data server. It looks like the data being returned isn't in the right format to me: jsonp should define a function that wraps the json but all I see is raw json. Which is why your workaround works...

blindfish

See the Wikipedia entry:

Note that for JSONP to work, a server must reply with a response that includes the JSONP function. JSONP does not work with JSON-formatted results.

@iamlukesky: check the docs for your data source: there may be an additional url_var required to get a jsonp formatted response, or if you're generating it with some server side code yourself read up on the jsonp format ;)