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>'
  }
]

Answer 1

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.

Answer 2

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.