Get JSON data with AJAX and then modify raphael.js script

Question

This is what I want to achieve: I want to create an interactive map using raphael.js. Using Php, I get datas from MySql DB and converted into a JSON file. So far so good.

Inside my raphael js file, I must now:

1. get those datas
2. use them in order to modify my raphael file.

I am currently stuck at this first step.

Here's my simplified JSON file (let's call it countries.json) :

[
 {
   "id": "1",
   "type": "Country",
   "title": "France",
   "published": "1",
   "description": "Republic"
 },
 {
   "id": "2",
   "type": "Country",
   "title": "Belgium",
   "published": "0",
   "description": "Monarchy"
 }
]

Here comes the simplified raphael.js

var rsr = Raphael('map', '548', '852');
var countries = [];

var france = rsr.path("M ...  z");
france.data({'published': '1', 'type': '', 'title': '', 'description':''});

var belgium = rsr.path("M ...  z");
belgium.data({'published': '0', 'type': '', 'title': '', 'description':''});

countries.push(france,belgium);

At the end of the raphael js, I make an Ajax request (using jquery) to get my JSON datas :

 $.ajax({
   type : 'GET',
   url : 'system/modules/countries.json',
   data: {get_param: 'value'},
   dataType : 'json',

   success : function(data, statut){
      console.log(statut);


   },

   error : function(data, statut,erreur){
      console.log(statut);

   },

    complete: function (data) {
       var json = $.parseJSON(data);
       $(json).each(function(i,val){
            $.each(val,function(k,v){
               console.log(k+" : "+ v);
            });
        });

    }

});

Here come the troubles: I get a 'success' status trough the success function. BUT I got an error while completing the script :

Uncaught SyntaxError: Unexpected token o

What did I miss? Can't figure out what is different from http://jsfiddle.net/fyxZt/4/ (see how to parse json data with jquery / javascript?)

That was just for part 1 :-) Assuming someone could help me to fix that, I still then have no idea how to write js loop that will set the raphael vars attributes as it:

var rsr = Raphael('map', '548', '852');
var countries = [];

var france = rsr.path("M ...  z");
france.data({'published': '1', 'type': 'Country', 'title': 'France', 'description':'Country'});

var belgium = rsr.path("M ...  z");
belgium.data({'published': '0', 'type': 'Country', 'title': 'Belgium', 'description':'Monarchy'});

communes.push(france,belgium);

Thanks an advance for your help and please excuse my unperfect english! Vinny

Answer 1

There is no data argument passed to the complete callback, according to jQuery API:

complete

Type: Function( jqXHR jqXHR, String textStatus )

(...)The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request ("success", "notmodified", "nocontent", "error", "timeout", "abort", or "parsererror").

So you only need to use the success callback :

$.ajax({
  type: 'GET',
  url: 'system/modules/countries.json',
  data: {
    get_param: 'value'
  },
  dataType: 'json',
  success: function (data, statut) {
    
    var json = data;
    $(json)
    .each(function (i, val) {
      $.each(val, function (k, v) {
        console.log(k + " : " + v);
      });
    });
  },
  error: function (data, statut, erreur) {
    console.log(statut);

  }
});

Concerning your second question, you cannot interact directly with variable name (accessing dynamic variable) in js, so you'll need to create an object where values are indexed by one of your json's values. However, the cleanest way to handle this would probably be to add your paths to the json...

var rsr = Raphael('map', '548', '852');
var countries = [];

//here I used the "id" property from the json
var paths={
  "1":rsr.path("M ...  z"),
  "2":rsr.path("M ... z")
};

countries.push(france,belgium);

$.ajax({
  type: 'GET',
  url: 'system/modules/countries.json',
  data: {
    get_param: 'value'
  },
  dataType: 'json',
  success: function (data, statut) {
    datas.forEach(function (country) {
      paths[country.id].data(country);
    });
  },
  error: function (data, statut, erreur) {
    console.log(statut);

  }
});