Access JSON data from external JavaScript

Question

I would like to use vanilla JavaScript to access some MeetUp API data. I am using the following code on my website:

function addScript(src) {
    console.log(src);
    var s = document.createElement( 'script' );
    s.setAttribute( 'src', src );
    document.body.appendChild( s );
}

addScript('https://api.meetup.com/2/groups?callback=?&sign=true&member_id=8377069&page=20&api&key=API_KEY_GOES_HERE&only=name,link');

I am using a script tag to access the data to avoid cross domain issues. I appreciate this could be solved using jQuery but I do not want to use any external libs.

The above code returns this error:

Uncaught SyntaxError: Unexpected token :

I believe this is because JSON format is returned. How can I fix this but at the same time still access the JSON data. Any help much appreciated.

Example link: http://jsfiddle.net/londonfed/7ms44ft6/

Not familiar with that site. I meant just plain javascript :-) — londonfed, Feb 06 '15 at 12:43

score 4 · Answer 1 · edited Feb 06 '15 at 11:36

Since the meetup API supports a callback parameter, create a global function (in window) and set the callback parameter to the function name:

function addScript(src) {
    console.log(src);
    var s = document.createElement( 'script' );
    s.setAttribute( 'src', src );
    document.body.appendChild( s );
}

// Callback for loading api data:
window.apiCallback = function(data) {
     // do what you want with the data
     alert(data.results[0].name);
}
addScript('https://api.meetup.com/2/groups?callback=apiCallback&sign=true&member_id=8377069&page=20&api&key=API_KEY_GOES_HERE&only=name,link');

Thanks Bouke. Worked a charm. Please can you review my post edit. — londonfed, Feb 06 '15 at 11:35

score 1 · Answer 2 · answered Feb 06 '15 at 11:39

1

You need to specify a callback parameter in your URL which will be the same as the name of the function that will be used to process the returned data:

function processJSONP(json) {
  console.log(json.results);
}

addScript('https://api.meetup.com/2/groups?callback=processJSONP&sign=true&member_id=8377069&page=20&api&key=5746c1b12324669953258703b11&only=name,link');

Remember that results is an array that you need to loop over.

answered Feb 06 '15 at 11:39

Andy

61,948
13
68
95

Thanks Andy, like with Bourge's answer it worked well. – londonfed Feb 06 '15 at 11:41

Access JSON data from external JavaScript

2 Answers2