1

I'm getting the following JavaScript error when trying to parse JSON that I'm getting from my controller:

Uncaught SyntaxError: Unexpected token & in JSON at position 1 at JSON.parse () at stores:76

Here is the code that serializes my list of elements (so i can send it to frontend as string then parse it with JSON.parse())

FeatureCollection mapFeatureCollection = new FeatureCollection(mapFeatures); // this is my object

// FeatureCollection instances provides the method ToJson which converts them to Json strings, use it before sending the FeatureCollection to the frontend
string nearbyStoresAsGeoJSON = JsonConvert.SerializeObject(mapFeatureCollection, Formatting.Indented);

// pass the json to view to mark them
ViewBag.nearbyStores = nearbyStoresAsGeoJSON;
return View("Stores");

Now I think where the problem lies is when i get the JSON in the frontend and I log it to the console, this is what i see: 

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -7.6350367,
          33.5841643
        ]
      },
      "properties": {
        "address": "Bigstone, 48 Rue Abou Salt Andaloussi, Casablanca 20250, Morocco"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -7.631687,
          33.584392
        ]
      },
      "properties": {
        "address": "Rue Ibnou Al Arif, Casablanca, Morocco"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -7.636013,
          33.5838827
        ]
      },
      "properties": {
        "address": "62 Rue Abou Ishak Al Marouni, Maarif, Morocco"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -7.635459,
          33.584367
        ]
      },
      "properties": {
        "address": "79 Rue Abou Salt Andaloussi, Casablanca 20300, Morocco"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -7.6336024,
          33.5834623
        ]
      },
      "properties": {
        "address": "33 Rue Ahmed Barakat, Casablanca 20250, Morocco"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -7.633257,
          33.583944
        ]
      },
      "properties": {
        "address": "39 Rue Ahmed Barakat, Casablanca 20000, Morocco"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -7.631826,
          33.5845488
        ]
      },
      "properties": {
        "address": "10 Rue Ibnou Al Arif, Casablanca 20330, Morocco"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -7.6334731,
          33.5834792
        ]
      },
      "properties": {
        "address": "Rue Ahmed Barakat, Casablanca, Morocco"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -7.6393279,
          33.5791312
        ]
      },
      "properties": {
        "address": "Rue Al Fourate, Casablanca, Morocco"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -7.634933,
          33.58392
        ]
      },
      "properties": {
        "address": "51 Maârif Rue Abou Salt Andaloussi, Casablanca 20000, Morocco"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -7.6357673,
          33.5820976
        ]
      },
      "properties": {
        "address": "14 Rue Ibnou Nafiss, Maarif, Morocco"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -7.6367801,
          33.5830291
        ]
      },
      "properties": {
        "address": "146 Rue Abou Zaid Addadoussi, Casablanca 20330, Morocco"
      }
    }
  ]
}
Improve this question
8
  • what is the result if you remove the , Formatting.Indented? Commented May 12, 2020 at 11:30
  • It's double encoding your json so that it could for example be displayed as html. Show how you output it in your view. My bet is you're doinv something like @ViewBag.nearbyStores which is going to cause it to be encoded with html entities Commented May 12, 2020 at 11:33
  • there is no such thing as a json object Commented May 12, 2020 at 11:34
  • @Daniel same result Commented May 12, 2020 at 11:36
  • @pinkfloydx33 like this var stores = '@ViewBag.nearbyStores'; var geojson = JSON.parse(stores); Commented May 12, 2020 at 11:38

1 Answer 1

Reset to default
1

You end up double-escaping/encoding the JSON. The Razor Helper @ under most circumstances is going to try and encode the input and return HTML entities for things like quotes, ampersands, less/greater signs etc.

You can use the @Html.Raw method to indicate that the input is already an encoded string.

var stores = '@Html.Raw(ViewBag.nearbyStores)';
var geojson = JSON.parse(stores);

But note I'd be careful. You never know what might be in the source variable that could cause some sort of injection attack (an unescaped single quote for example).

You should be able to avoid the extra parsing altogether:

var stores = @Html.Raw(ViewBag.nearbyStores);

But that's with the understanding the nearbyStores is in fact valid JSON.

Rather than serializing in your controller, you could make this the responsibility of the view using JsonHelper.Serialize 

//controller 
ViewBag.nearbyStores = mapFeatureCollection;
// view
var stores = @Html.Raw(Json.Serialize(ViewBag.nearbyStores));
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Or better yet, you could just use @Html.Raw(ViewBag.nearbyStores) and no further parsing needs to be done.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.