jQuery SVG map - pulling content as JSON from jQuery Ajax not working

Question

Below is my code:

$.ajax({
    type: "GET",
    url: "content/content.json",
    success: function( data ) {
        check = true;
        ajaxMap = data;
        drawMap(data);
    }
});

function drawMap( data ) {
   $('#map').mapSvg({
      source: 'maps/test.svg',
      colors: {
         selected: "#00431e",
         disabled: "#ffffff"
      },

      tooltipsMode: 'custom', 
      zoom: true,
      zoomButtons: {'show': true, 'location': 'left'},
      pan: true,
      responsive: true,
      zoomLimit: [0,500],

      marks: data,  // here I pass data from JSON file

      tooltipsMode: 'custom',
      zoom: true,
      pan: true,
      responsive: 0,
      zoomLimit: [0,100]
  });
}

It works when I pass data as JSON format directly in marks, but when I pass data variable it doesn't work.

Updated: This my json data:

[
  { c: [50.84199288,122.83167],
      attrs: {'src': 'markers/pin-yellow.png'},
      tooltip: '<h2>Dublin - Ireland</h2><p>Embassies and High Commissions</p><a href="http://www.dfat.gov.au/geo/ireland/" title="http://www.dfat.gov.au/geo/ireland/">Read More</a>'
  },
  { c: [44.94199288,119.93167],
      attrs: {'src': 'markers/pin-yellow.png'},
      tooltip: '<h2>London - United Kingdom</h2><p>Embassies and High Commissions</p><a href="http://www.dfat.gov.au/geo/united_kingdom/" title="http://www.dfat.gov.au/geo/united_kingdom/">Read More</a>'
  },
  { c: [28.94199288,100.93167],
      attrs: {'src': 'markers/pin-yellow.png'},
      tooltip: '<h2>Header</h2><p>Embassies and High Commissions</p><a href="#" title="">Read More</a>'
  },
  { c: [44.94199288,115.93167],
      attrs: {'src': 'markers/pin-yellow.png'},
      tooltip: '<h2>Header</h2><p>Embassies and High Commissions</p><a href="#" title="">Read More</a>'
  },
  { c: [20.94199288,135.93167],
      attrs: {'src': 'markers/pin-yellow.png'},
      tooltip: '<h2>Header</h2><p>Embassies and High Commissions</p><a href="#" title="">Read More</a>'
  }
]

The question isn't clear (at least to me). Could you please be more specific? — Alkis Kalogeris, Nov 08 '13 at 08:03
Can you show us the code where you call `drawMap()`? Like this, we don't know what `data` looks like. You should also use the developer tools to examine what gets passed to the function. — Thomas W, Nov 11 '13 at 06:12

score 3 · Answer 1 · edited May 23 '17 at 11:43

Valid JSON is valid JavaScript but valid JavaScript is not necessarily valid JSON. The json data you posted in the question is not valid JSON; you can verify this using the JSONlint service. jQuery.ajax will raise an error when it expects JSON but encounters invalid JSON (see this question). To fix the issue, you must revise the server side code to emit valid JSON. To begin with, the keys need to be enclosed in double quotes.

Sudhanshu Yadav · Accepted Answer · 2013-11-12T10:29:55.197

You have to define dataType property if you aspect response in json format. currently you are getting data as string.

$.ajax({
    type: "GET",
    url: "content/content.json",
    dataType:'json',
    success: function( data ) {
        check = true;
        ajaxMap = data;
        drawMap(data);
    }
});

or use data=JSON.parse(data) in your success handler.

Moreover what you have shown in example is object literal , not an json. see http://json.org/ . JSON.parse() will give error on your example.

jQuery SVG map - pulling content as JSON from jQuery Ajax not working

2 Answers2

Linked