I have a Handler which has some data inside as shown below:

 

   {"city1": { "name": "Adana","slug": "north-east", "url": "#", "path": "M 156.53125,407.40625 L 156.71875,408.5625 L 157.1875,407.8125 L 156.53125,407.40625 z"}}

P.S: The path is coming from SVG image. it draws a city border and there are many cities. 

I try to get the data from this handler to variable to use it later... 

CODE: 

  <script type="text/javascript">
     var paths; 
        $.ajax({
            url: '/paths.ashx',
            dataType: 'json',
            contentType: 'application/json',
            responseType: "json",
            success: function (data) {
                paths = data;
                alert(paths);
            },
            error: function (data, status, jqXHR) {
                alert(status);
            } 
        }); 
 jQuery(function ($) { 
        var c = Raphael('map', "100%", "100%");
        c.safari();
        var label = c.popup(0, 0, "").hide();
        attr = { fill: '#898989', stroke: '#FFFFFF', 'stroke-width': 2, 'stroke-linejoin': 'round' }
        arr = new Array();
        for (var item in paths) {
            var p = c.path(paths[item].path);
            arr[p.id] = item;
            p.attr(attr);
            p.hover(function () {
                this.animate({
                    fill: '#8fbf27'
                }, 200);
                bbox = this.getBBox();
                label.attr({ text: paths[arr[this.id]].name }).update(bbox.x, bbox.y + bbox.height / 2, bbox.width).toFront().show();
            }, function () {
                this.animate({
                    fill: attr.fill
                }, 200);
                label.hide();
            })
            .click(function () {
                location.href = paths[arr[this.id]].url;
            })
        }
    });
  </script>

The problem comes right here...paths or data is undefined, it's always empty. But paths.ashx is not empty at all... 

I couldnt find the solution...could you take a look pls...