Unexpected token < in JSON at position 0

Question

According to Google, this error seems to happen quite often, and now it happens to me. I read lots of the posts I found, but unfortunately my error remains...

I took a countries.json (I think from the OpenLayers repo or a similar one), put it in a local data folder and build something to display it (in a Vue environment). That works fine.

Then I extracted Afghanistan (the very first country in the list) and put its geojson data in its own file, /data/afg.geojson'. I also tested it on https://geojson.io` first - it does work. But in my app it does not, instead this error is thrown:

VM49900:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at getObject (JSONFeature.js?f68c:191)
    at GeoJSON.JSONFeature.readFeatures (JSONFeature.js?f68c:61)
    at XMLHttpRequest.xhr.onload (featureloader.js?6c5f:86)

This is, what Afghanistan looks like:

{"type":"Feature","id":"AFG","properties":{"name":"Afghanistan"},"geometry":{"type":"Polygon","coordinates":[[[61.210817,35.650072],[62.230651,35.270664],[62.984662,35.404041],[63.193538,35.857166],[63.982896,36.007957],[64.546479,36.312073],[64.746105,37.111818],[65.588948,37.305217],[65.745631,37.661164],[66.217385,37.39379],[66.518607,37.362784],[67.075782,37.356144],[67.83,37.144994],[68.135562,37.023115],[68.859446,37.344336],[69.196273,37.151144],[69.518785,37.608997],[70.116578,37.588223],[70.270574,37.735165],[70.376304,38.138396],[70.806821,38.486282],[71.348131,38.258905],[71.239404,37.953265],[71.541918,37.905774],[71.448693,37.065645],[71.844638,36.738171],[72.193041,36.948288],[72.63689,37.047558],[73.260056,37.495257],[73.948696,37.421566],[74.980002,37.41999],[75.158028,37.133031],[74.575893,37.020841],[74.067552,36.836176],[72.920025,36.720007],[71.846292,36.509942],[71.262348,36.074388],[71.498768,35.650563],[71.613076,35.153203],[71.115019,34.733126],[71.156773,34.348911],[70.881803,33.988856],[69.930543,34.02012],[70.323594,33.358533],[69.687147,33.105499],[69.262522,32.501944],[69.317764,31.901412],[68.926677,31.620189],[68.556932,31.71331],[67.792689,31.58293],[67.683394,31.303154],[66.938891,31.304911],[66.381458,30.738899],[66.346473,29.887943],[65.046862,29.472181],[64.350419,29.560031],[64.148002,29.340819],[63.550261,29.468331],[62.549857,29.318572],[60.874248,29.829239],[61.781222,30.73585],[61.699314,31.379506],[60.941945,31.548075],[60.863655,32.18292],[60.536078,32.981269],[60.9637,33.528832],[60.52843,33.676446],[60.803193,34.404102],[61.210817,35.650072]]]}}

And this is the part of my code that should display the geojson (as mentioned: it works with countries.geojson):

// Vue.js
export default {
  mounted () {
    this.prepareGeoJson()
  },
  methods: {
    prepareGeoJson (url) {
      this.gsSource = new VectorSource({
        format: new GeoJSON(),
        url: '/data/afg.geojson'
      })
      this.gsLayer.setSource(this.gsSource)
      this.gsLayer.setStyle(new Style({
        stroke: new Stroke({ color: 'green', width: 3 })
      }))
    },
    // Test Json
    toggleTestGeoJson (geojson) {
      this.olMap.addLayer(this.gsLayer)
    },
  }
}

The original countries.json that I use, is here: https://dl.rowild.at/countries.geojson

Other things I can say:

• the file is minified
• the network response in "200" OK
• I work with VSCode...

Any idea, where my error is?

Answer 1

The text/body of the response would be useful to know. I have encountered this parsing error many times and it's always because the response is HTML, not JSON. The "<" character is the start of every HTML file. A 200 response does not necessarily mean that the response is returning what you requested.

Answer 2

import countriesData from "./countries.geojson";
methods: {
    prepareGeoJson (url) {
      this.gsSource = new VectorSource({
        format: new GeoJSON(),
        url:countriesData 
      })
      this.gsLayer.setSource(this.gsSource)
      this.gsLayer.setStyle(new Style({
        stroke: new Stroke({ color: 'green', width: 3 })
      }))
    },
    // Test Json
    toggleTestGeoJson (geojson) {
      this.olMap.addLayer(this.gsLayer)
    },
  }