CODEWITHSUNDEEP
javascriptjson
NewBoy
NewBoy

Reputation: 1144

JSONP not displaying data in HTML

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;

 }

Upvotes: 1

Views: 62

Answers (3)

Sebastian Nette
Sebastian Nette

Reputation: 7812

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.

Upvotes: 1

sam100rav
sam100rav

Reputation: 3783

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

Upvotes: 0

jrath
jrath

Reputation: 990

you have not mentioned the function name.

insead of 

function (data) {

use

var myFn = function (data) {

};

or 

function myFN(data) {

}

Upvotes: 0

Related Questions