Im getting unexpectected token : for a valid JSON

Question

I am working with ArcGIS, Esri request and I am trying to get a data from a webserver, but everytime I got the same "unexpected token : " error even when my response is correct.

Thanks in advance.

Here's my code:

require(["dojo/dom", "dojo/on", "dojo/dom-class", "dojo/_base/json",  "esri/urlUtils", "esri/config", "esri/request", "dojo/domReady!"], function(dom, on, domClass, dojoJson, urlUtils, esriConfig, esriRequest) {

    // fallback to proxy for non-CORS capable browsers
    // esri.config.defaults.io.proxyUrl  =  "/arcgisserver/apis/javascript/proxy/proxy.ashx";
    esriConfig.defaults.io.proxyUrl = "/proxy/proxy.ashx";

    dom.byId("url").value = "http://api.citybik.es/v2/networks/dublinbikes";
    dom.byId("content").value = "";

    //handle the Go button's click event
    on(dom.byId("submitRequest"), "click", getContent);

    function getContent(){

      var contentDiv = dom.byId("content");
      contentDiv.value = "";
      domClass.remove(contentDiv, "failure");
      dom.byId("status").innerHTML = "Downloading...";

     //  //get the url 
     // var url = urlUtils.urlToObject(dom.byId("url").value);

     //  console.log("EL URL path",url.path)
     //  console.log("EL URL query",url.query)
     //  var requestHandle = esriRequest({
     //    "url": url.path,
     //    "content": url.query
     //  });
     //  requestHandle.then(requestSucceeded, requestFailed);

      function requestSucceeded(data) {
        console.log(data);
      }

      function requestFailed(error) {
        console.log("Error: ", error.message);
      }

      var request = esriRequest({
        url: "http://api.citybik.es/v2/networks/dublinbikes",
        content: {
          format:  "json"
        },
        handleAs: "json",
        callbackParamName: "retrive"
      });
      request.then(requestSucceeded, requestFailed);
    }
  }
);

Im getting:

Uncaught SyntaxError: Unexpected token : dublinbikes:2

Answer 1

The root problem is that you're getting esri.request a bit confused with what you're asking for, and what the server is giving back. Because you're making a request on a different domain (api.citybik.es) from where you're running the code (whatever your host is), you need to use either:

• CORS
• JSONP
• a proxy

to get around the browser's security restrictions. There's plenty of detail on SO about these, I won't dribble on further.

Your code has two methods configured - the callbackParamName tells esri.request to use JSONP, and you've also got a proxy set just in case. The callbackParamName tells it to only use JSONP though, so the proxy is ignored.

Now the real problem, as I noted in a comment above, is that v2 of the CityBikes API doesn't actually seem to support JSONP, so your callback parameter is ignored and the server gives you back straight JSON. esri.request is expecting JSONP, and voila - unexpected token :. Requesting

http://api.citybik.es/v2/networks/dublinbikes?callback=stackoverflow

returns:

{
network: {
company: "JCDecaux",
href: "/v2/networks/dublinbikes",
....

See? No mention of our stackoverflow variable. If you look at v1 of the API instead, that DOES support JSONP. Requesting

http://api.citybik.es/dublinbikes.json?callback=stackoverflow

returns:

stackoverflow(
[
{
bikes: 1,
name: "Fenian Street",
idx: 0,
....

...and there is our stackoverflow variable. OR you can remove the callbackParamName from your esriRequest, and see if your proxy will process the JSON from the v2 address.