JSONP not displaying data in HTML

Question

I am currently experimenting JSONP data using native Javascript. I am trying to get the data to display. How ever i am receiving a syntax error. Unexpected token : As far as i am aware i follow the correct steps into in order gather data. Below is a snippet of my code. Link to JSfiddle

<script src="http://linkToMyJSONDetails"></script>

JS

function (data) {
  var showStops = '';

 for (var i = 0; i < data.markers.length; i++) {
 showStops += '<div class="stops">';
 showStops += '<h3>' + data.markers[i].smsCode + '</h3>';
 showStops += '<h1>' + data.markers[i].name + '</h1>';
 showStops += '</div>';
 }

  document.getElementById('bus-stops').innerHTML = showStops;

 }

function (data) You need to give a name to the function. Also where are you calling this function? Just by adding the <script> add you can't access it using JavaScript. — kittenchief
– kittenchief, Commented Jul 21, 2015 at 17:27

Sebastian Nette · Accepted Answer · 2015-07-21 17:43:52Z

1

You need to do 2 things. First: Add a callback: (Scroll to the right, since your link is a bit long)

http://digitaslbi-id-test.herokuapp.com/bus-stops?northEast=51.52783450,-0.04076115&southWest=51.51560467,-0.10225884&callback=someFunction
                                                                                                                     ^^^^^^^^^^^^^^^^^^^^^^

Second: Define the callback:

// same function name as the callback in the jsonp url
function someFunction(data) { 
  var showStops = '';

  for (var i = 0; i < data.markers.length; i++) {
    showStops += '<div class="stops">';
    showStops += '<h3>' + data.markers[i].smsCode + '</h3>';
    showStops += '<h1>' + data.markers[i].name + '</h1>';
    showStops += '</div>';
  }

  document.getElementById('bus-stops').innerHTML = showStops;

}

Fiddle: http://jsfiddle.net/29eajsjm/4/ Make sure the function is defined before calling the jsonp.

edited Jul 21, 2015 at 17:43

answered Jul 21, 2015 at 17:32

Sebastian Nette

7,9022 gold badges20 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NewBoy Over a year ago

Thanks for this VERY helpful, i didn't realise how simple is it.

jrath · Accepted Answer · 2015-07-21 17:26:30Z

0

you have not mentioned the function name.

insead of

function (data) {

use

var myFn = function (data) {

};

or

function myFN(data) {

}

answered Jul 21, 2015 at 17:26

jrath

9904 silver badges14 bronze badges

Comments

sam100rav · Accepted Answer · 2015-07-21 17:32:24Z

0

First of all validate the json you are getting from your function at jsonlint.

answered Jul 21, 2015 at 17:32

sam100rav

3,7934 gold badges30 silver badges45 bronze badges

Collectives™ on Stack Overflow

JSONP not displaying data in HTML

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related