
Originariamente inviato da
Alfaone78
Ciao sspintux,
....
Se guardi lo screenshot inviato nella mia precedente il codice passa dal Breakpoint 130, poi al 134 ma senza aver ancora caricato l' array e poi al 131, e qui carica l' array.
Per cui per qualche strano motivo il flusso fa questo strano giro.
...
Questo mi era sfuggito;
il motivo dello "strano giro" è che la chiamata getJSON è asincrona
per cui devi usare il suo risultato nella/e callback della chiamata stessa
perchè è qui che il risultato è disponibile.
Riassumendo :
1) usi documento.ready per essere sicuro che l'html della pagina sia pronto
2) usi il risultato fornito da getJSON nella/e sue callback
Per inciso, credo sia ancora possibile anche impostare la chiamata ajax come sincrona (ma credo sia anche deprecato)
$.ajax({
url: myUrl,
dataType: 'json',
async: false, // <----
data: myData,
success: function(data) {
//fine chiamata se tutto ok
}
});
Personalmente farei una cosa del genere (ovviamente non provato !)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>
</head>
<body>
<div class="map">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 -21.6 761 919" style="enable-background:new 0 -21.6 761 919;" xml:space="preserve">
<g id="sar">
<polygon class="st0" points="193,463 203.6,472.3 210,472.3 207.2,482 217.6,491.5 221.5,524.9 213.6,537.5 218.8,559.4
206.2,599.4 209.1,610.6 198.5,623.2 187,611.7 170.8,617.6 173.8,629.1 157.4,637.6 139.2,619.5 138.3,591.7 149.8,564.9
141.1,561.1 143.2,550.4 142.1,513.4 136.4,507.9 129,505.7 128.1,502.8 136.4,498.3 133.6,482 132.6,479 141.1,474.9 143.2,487.5
154.5,489.4 167.9,484.7 184,469.4 "/>
</g>
<g id="sic">
<polygon class="st0" points="374.4,704.6 363.7,710.2 365.6,729.2 370.8,741.8 400.2,750.4 430.8,770.3 449.7,778.2 467.9,785.6
477.6,799.1 494.8,802.9 510.9,810.6 515.5,805.6 510.1,797.2 522.6,780.1 516.6,763.8 508.2,760.7 512,736.1 521.6,725.5
530.9,694.8 513.7,694 507.3,703.5 497.5,696.7 483.2,705.5 469.8,710.2 448.8,706.5 439.2,713.1 421.2,704.6 410.5,705.5
410.5,695.9 391.6,696.7 393.5,709.3 385,711.2 "/>
</g>
<g id="cal">
<polygon class="st0" points="535.3,568.9 549.7,566.8 557.5,568.4 580.4,558.3 588.3,561.9 582.8,580.1 587.8,593.9 596.8,591.7
606.2,602.6 615.4,602.1 616.6,627.5 621.1,634.1 621.7,647.5 605.5,643.4 589.5,655.9 589.9,685 573.9,696.5 563.2,718 542.1,718
537.7,707.1 538,704.6 537.2,698.9 543.7,690.2 550.3,668.3 545.2,663.4 565.1,654 553.9,610.2 543.7,597.2 "/>
</g>
<g id="bas">
<polyline class="st0" points="601.7,531.5 594.6,517.6 583.9,510.9 573.6,513.4 562.7,498.3 554.7,497 551.1,487.2 545.2,482.3
538.9,485.6 527.8,485.3 527.8,498.6 518.5,502.5 524.9,524.7 542.4,549.6 537.7,552 530.3,566.2 530.3,566.2 534.7,568.9
549.8,566.8 557.5,568.7 570.2,562.7 581.3,558 588.9,561.6 590.2,556.4 601.7,531.5 "/>
</g>
<g id="pug">
<polygon class="st0" points="495.8,462 495.1,451.6 501.6,439.3 506.3,426.9 506.3,426.5 512,428.1 558.6,429.1 565.1,437.9
547.1,448.5 610,486.6 635.1,505.7 659,514.3 667.4,531.5 685.5,542.1 689.6,551.7 683.6,564 685.5,576.3 663.8,570.9 658.1,560.2
655.1,548.7 636,544.9 620.7,535.3 617.9,531.5 601.7,531.5 594.6,517.6 583.9,510.9 573.6,513.4 562.7,498.3 554.7,497
551.1,487.2 545.2,482.3 538.9,485.6 512,486.3 509.5,472.6 502.5,470.4 501.6,462.3 "/>
</g>
<g id="cam">
<polyline class="st0" points="430.8,479 451.6,508.7 460.5,507.9 470.9,524.1 489.6,523.2 498.6,538.3 493.9,549.6 509,555.6
530,566.5 530.3,565.1 537.7,552 542.4,549.6 524.9,524.7 518.5,502.5 527.8,498.6 527.8,485.6 525.9,486 512,486.3 509.5,472.6
502.5,470.4 501.6,462.3 495.8,462 477.2,466.7 462.3,457.3 450.4,464.2 436.3,463.3 439.2,472.6 430.8,479 "/>
</g>
........ALTRE REGIONI TAGLIATE.....
</svg>
</div>
<script>
$(document).ready(function(){
var regions;
var temp_array;
$.getJSON('mappa.json')
.done(function (data) {
-- qui la chiamata ajax è terminata e posso usare il risultato
ApplicaJSONAllaMappa(data);
});
function ApplicaJSONAllaMappa(data)
{
if (!data)
{
alert("Azz! Qualcosa non va nel json")
return false;
};
temp_array= regions.map(function(item){
return item.population;
});
var highest_value = Math.max.apply(Math, temp_array);
$(function() {
for(i = 0; i < regions.length; i++) {
$('#'+ regions[i].region_code)
.css({'fill': 'rgba(0,0,0,' + regions[i].population/highest_value +')'})
.data('region', regions[i]);
}
$('.map g').mouseover(function (e) {
var region_data=$(this).data('region');
$('<div class="info_panel">'+
region_data.region_name + '<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +
'</div>'
)
.appendTo('body');
})
.mouseleave(function () {
$('.info_panel').remove();
})
.mousemove(function(e) {
var mouseX = e.pageX, //X coordinates of mouse
mouseY = e.pageY; //Y coordinates of mouse
$('.info_panel').css({
top: mouseY-50,
left: mouseX - ($('.info_panel').width()/2)
});
});
});
//---
});
</script>
</body>
</html>
HTH