Map parsing json file works on localhost but not on web server

[DamNguyen]

Hi guys,

I copied this exact map (Create a FeatureLayer with client side graphics - 4.0 ) to my website and while it works on my localhost machine, it fails on the web server. On the server, the map loads, but none of the earthquake data is showing. The error I see in console is:

Test.htm:337 Creating legend failed.  SyntaxError: Unexpected token <

    at Object.parse (native)

    at c.json (https://js.arcgis.com/4.0/init.js:192:467)

    at g (https://js.arcgis.com/4.0/init.js:191:119)

    at k [as handleResponse] (https://js.arcgis.com/4.0/init.js:184:135)

    at XMLHttpRequest.p (https://js.arcgis.com/4.0/init.js:188:240)errback @ Test.htm:337f @ init.js:150p @ init.js:149reject.errback @ init.js:151f @ init.js:150p @ init.js:149reject.errback @ init.js:151f @ init.js:150p @ init.js:149reject.errback @ init.js:151f @ init.js:150p @ init.js:149reject.errback @ init.js:151(anonymous function) @ init.js:327e @ init.js:153f @ init.js:153l.reject @ init.js:156c @ init.js:154e @ init.js:154f @ init.js:153l.reject @ init.js:156c @ init.js:154e @ init.js:154f @ init.js:153l.reject @ init.js:156c @ init.js:154e @ init.js:154f @ init.js:153l.reject @ init.js:156c @ init.js:154e @ init.js:154f @ init.js:153l.reject @ init.js:156k @ init.js:184p @ init.js:188

I don't have any clue on how to debug this. Any help is appreciated, thanks.

I'm also attaching a screenshot of the "suspected" area when I click on the last line of the error console.

Edit: This example is run on a asp.net environment. I put the same test map on a PHP server and it works. Does this have something to do with file permissions?

[ChrisSmith7]

You can debug back through the call stack sometimes in the API to see if anything clues you in. It's pretty clear at least it's finding an unexpected token "<" and croaking.

When you say you copied the example "exactly", did you really copy and paste the example verbatim and it worked, without any changes on your local copy?

The reason I ask... the getData() func:

      function getData() {

        var url = "data/week.geojson";


        return esriRequest(url, {
          responseType: "json"
        });
      }

...uses a relative path. The data is sourced here:

https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection/live/data...

Make sure you copy the file locally and reference it in the relative way it is expecting (on your own site), or change the URL to the absolute path above. If you did copy the example exactly and made no changes, it may have worked perhaps because the file was cached? Just a thought... and a shot in the dark.

[DamNguyen]

Ah, sorry. I did copy the json file to my local drive and placed it in a folder called data. So that relative path does point to an existing file.

I tried using the absolute path, and I got that cross domain error requiring some kind of proxy setup.

Test.htm:337 Creating legend failed.  Error: esri/config: esriConfig.request.proxyUrl is not set. If making a request to a CORS-enabled server, please push the domain into esriConfig.request.corsEnabledServers.

    at Error (native)

    at Object.e.getProxyUrl (https://js.arcgis.com/4.0/init.js:346:266)

    at l (https://js.arcgis.com/4.0/init.js:319:267)

    at u (https://js.arcgis.com/4.0/init.js:324:417)

    at y (https://js.arcgis.com/4.0/init.js:330:158)

    at https://js.arcgis.com/4.0/init.js:331:181

    at e (https://js.arcgis.com/4.0/init.js:153:423)

    at then.c.then (https://js.arcgis.com/4.0/init.js:156:232)

    at a.extend.always (https://js.arcgis.com/4.0/init.js:158:512)

    at C (https://js.arcgis.com/4.0/init.js:331:163)

[ChrisSmith7 · Accepted solution]

I see you made an edit that it's working in a PHP environment, but not an ASP.NET environment... You may want to try adding a MIME type for geojson in IIS. Can you access the geojson directly in the web browser?

[JeffJacobson]

The first thing I would do is open up the network tab in the debugging window and reload the page. Look for the request to the week.geojson file and examine the response.

Since the error message mentions the '<' character, I suspect that you are getting an error page instead of the JSON text, and the '<' is the beginning of an HTML response.

It's possible you may need to add the 'application/json' mime type to your server configuration before it will serve out JSON files. (The method for doing so will depend on what web server you are using.)

[JeffJacobson]

I just noticed a bunch of other replies were added between when I started typing and when I submitted my reply. Oops.

[ChrisSmith7]

Ah-hah, you and I are on the same page!

[DamNguyen]

Yay! It IS that missing json mime type! I added it and the map works well now. Thank you so much!