Anto Anto - 1 year ago 62
Node.js Question

Can't create and pass jsonp data

I am new to Node.js and I have created a method that should asynchronously fetch jsonp data via ajax and display the retrieved content in a graph. This method works fine when the url points to a static js file (in this case productsData.js) containing jsonp data:

function loadChart(destElementId, alertId) {
type: "GET",
data: {prodId: prodId},
jsonp: true,
dataType : 'json',
jsonpCallback: "jsonpCallback"

window["jsonpCallback"] = function(data) {

populateData(data, destId);

As in normal applications, I want to pass real data fetched via an external web service. I have created the following js file (data-client.js) that retrieves data from a specific web service. When calls are browser-based, the data is fetched successfully as a normal json and is displayed accordingly in the browser.

var express = require('express');
var router = express.Router();
var http = require('http');
var yaml_config = require('node-yaml-config');
var config = yaml_config.load(__dirname + '/../config/app-config.yml');

router.get('/data/:id', function (req, res, next) {
var opts = {
port: config.alertService.port,
method: 'GET',
path: '/DataService/rest/receiveData/' +

var reqGet = http.request(opts, function (dataResponse) {
var responseString = '';
dataResponse.on('data', function (data) {
responseString += data;
var response = {x:[],y:[],z:[],t:[]};
dataResponse.on('end', function () {
var responseObject = JSON.parse(responseString);
var accs =;
for(var i in accs){
reqGet.on('error', function (e) {


module.exports = router;

The first step for using live jsonp data is to replace the previous url value with:

url: 'http://localhost:3000/products/data/'+productId,

The second step is to replace in the data-client.js:



res.jsonp('jsonpCallback('+ JSON.stringify(response) + ');');

Somehow the data is not fetched. When I try to get the data via the browser (i.e. by entering http://localhost:3000/data/ID937) however I get the following result:


Can someone please tell me where the problem may be? I would be very thankful.

Answer Source

It looks like you are using Express.

jsonp() expects to be passed your raw data, not a string containing the complete response. It also expects to read the callback name from the query string, which jQuery will generate for you if you let it.

So the first thing to do is to fix your client side code so it passes the callback name correctly

On the client

    url: 'http://localhost:3000/products/data/' + productId,
    dataType: 'jsonp', 
}).done(function(data) {
    populateData(data, destId);

The changes here are:

  • GET is the default (and, for JSONP, only option) so there is no need to specify the type.
  • You are passing the data as a URL path part, not a query string. Drop the data property that you aren't using.
  • The jsonp property is used to override the callback name. That's harmful, don't do that (likewise, don't specify jsonpCallback). jQuery will generate one for you and add it to the query string.
  • If you are dealing in JSONP then specify that as the data type, not JSON.
  • Don't create your own global manually. Pass your function to done and let jQuery make it a global (with a generated name to match the callback).

On the server

Just pass the data structure you want to send back to jsonp().


The callback name will be read from the query string by Express.