Trouble with JSONP rendering data in HTML

I am currently exploring JSONP data using pure Javascript. I am attempting to display the data, but I keep encountering a syntax error: Unexpected token :. I believe I am following the correct steps to gather the data. Below is a snippet of my code. Link to JSfiddle

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

Javascript:

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;

 }
javascriptjson

Answer №1

To make it work, you've got to take care of 2 important things. First: Include a callback in your link (Don't forget to scroll right if the link appears lengthy)

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

Second: Define the specified callback:

// ensure the callback function shares the same name as mentioned 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;

}

Check out this Fiddle for reference: http://jsfiddle.net/29eajsjm/4/ Remember, make sure the function is defined prior to calling the jsonp.

Answer №2

It appears that the function name has not been specified.

Instead of:

function (data) {

Try using:

var myFn = function (data) {

};

or 

function myFN(data) {

}

Answer №3

Before anything else, make sure to verify the JSON data received from your function by using a tool like jsonlint.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the magic of Nest.JS with the power of Observables

As a newcomer to Nest.JS, I am struggling with understanding how to effectively utilize observables. I have a method that needs to perform the following tasks: Login to HashiCorp Vault and retrieve a client_token via an HTTP call. If a token is received f ...

javascriptnode.jstypescriptnestjsrxjs-observables

Is it possible for me to create a variable that is assigned the width of the page as its value?

As I work on building a website for my company, I encountered an issue where certain divs overlap when the page is resized smaller. I am looking for a solution to dynamically adjust the CSS using JavaScript based on the width of the page. Despite attempti ...

javascripthtmlcss

Displaying a pop-up message from the server to the client using Express.js and React.js

I have successfully created a CRUD application and now I am looking to implement a feature on the frontend to notify the user if the entered FirstName already exists. Currently, I am able to log a message using console.log(), but I want to display this mes ...

javascriptmysqlnode.jsreactjsexpress

Angular directive ng-clickIs the directive in angular known as

I am struggling to understand why my ng-click function in my directive is not triggering the fooControls clickTest. Why isn't clickTest logging to the console? Is there a more efficient way to accomplish this? Custom Directive app.directive('fo ...

javascriptangularjs

What is the best method for transmitting server errors to the client?

When using passport.js, I have all the required code in place. However, I am facing an issue with displaying errors on the client-side. Despite having the successRedirect set up correctly, nothing happens when a wrong password is entered, and no error mess ...

javascripthtmlnode.jsexpresspassport.js

Exploring the depths of recursion with jQuery: Unraveling the

Having some issues with a recursive function in jQuery that's throwing an exception: 'Uncaught RangeError: Maximum call stack size exceeded' I can't figure out why this recursive function might be running infinitely. Any help would be ...

javascriptjqueryrecursion

How come I am unable to scroll beyond my parallax section unless I move the mouse first?

Currently, I am working on a webpage that includes a Parallax landing image. In order for the Parallax effect to function properly, the image has a greater height, requiring users to scroll down. This leads to the appearance of a second scrollbar specifica ...

javascripthtmlcssvue.jsscrollbar

An issue arises with the Datatables destroy function

Utilizing datatables.js to generate a report table on my page with filters. However, when applying any of the filters, the data returned has varying column counts which prompts me to destroy and recreate the table. Unfortunately, an error message pops up ...

javascriptdatatables

Navigating the DOM upwards using D3 and CSS to make targeted selections

In my HTML code, I have a structured calendar representation as follows: <table> <thead>...</thead> <tbody> <tr>...</tr> <tr> <td day="4">...</td> <td day="5">...</td& ...

javascriptcssd3.jscss-selectors

The initial row's Id will be used as the Id for all subsequent rows within a JSON object

After dragging a tr in a table and confirming by clicking a button, I need the order list to be updated in the database. To achieve this, I created a JSON object where I intend to save the ids and their corresponding new orders. The issue I am facing is t ...

javascriptjquerynode.jsjson

Modify the color of the validation message in bootstrap to appear as red

I need help changing the error message text color to red in a form that displays an error message if an invalid email is entered. Can anyone provide guidance on how to achieve this? $('#subscribe-form').bootstrapValidator({ live: 'disab ...

javascripthtmltwitter-bootstrapforms

A Comparison of Mootools Elements in Moo Versions 1.1 and 1.2

I have a script that uses mootools 1.1 to manage an Ajax "form" and checks how many rows are in the dynamically created form before processing them: form_rows = $$('#form_row'); // The number of rows can vary from 4 to 20 console.log(form_rows.l ...

javascriptmootoolselement

Accessing array values depending on DOM response

Generate a string from selected DOM elements I have an object that contains months and their corresponding index numbers (not dates) monthList = {"jan" : "1", "feb" : "2". etc: etc} The user can input values like jan or jan,feb,march and I need to return ...

javascripthtmlloops

Is there a way to insert data with a specific key into an array of objects without losing existing JSON data in Node.js?

I came across an object structured like this : { "mark": [ { "id":1, "name": "mark", "age":26 }, { "id":2, "name": "mark", " ...

javascriptnode.jsjson

Creating a hierarchical array structure from a flattened Mongo DB document

I recently made changes to my Mongo DB document where I converted a nested array into a nested document. For example, the structure of my document now looks like this: { projects : { "id1" : { name : "project 1" parentP ...

phparraysjsonmongodb

The hashKey is not generating a new value when pushing a new object in an Angular application

I have come across an issue related to generating new $$hashKey within the following code snippet: this.list = '[{ "body": "asdf", "tag": "resolved", "time": "2147483647", "id": "51" }, { "body": "asdf", "tag": "undone", " ...

javascriptarraysangularjs

When the condition within the click function is met, concatenate the variable

I'm currently working on a function that involves adding "http://" to the variable 'bar' if it's not already included. This modified 'bar' value will then be sent via ajax to be inserted into the database and also displayed ba ...

javascriptjquery

Exploring the Power of JSON-Objects in AJAX

I need help loading only a portion of a text file (*.txt) into my HTML. The other part of the file provides information about the number of li's in it. The content of the text file is structured as a JSON-Object and here is an example: {"content": [ ...

htmlajaxjson

Require.js and R.js optimizer overlooks shimming configuration

I am facing an issue where R.js is not loading my shim properly, causing jQuery to load before tinyMCE which results in tiny being initialized before it has fully loaded. How can I resolve this problem? build-js.js: var requirejs = require('requirej ...

javascriptnode.jsrequirejs

Steps for updating a nested value in a json file and saving the changes:

Below is the content of a JSON file: {"Event": "ev0000001_2019", "Data": [{ "eventSummary": { "awards": [{ "awardName": "Foo", "categories": [{ "categoryName": "Best 1", ...

pythonjsondictionary