Leggere file JSON e caricarlo in una variabile

**sspintux** · 05-10-2018, 18:51

Sposta anche la chiusura del div map sopra il tag <script>.

P. S.
Scusa ma con il cell mi riesce scomodo farlo

**sspintux** · 06-10-2018, 08:07

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

**Alfaone78** · 07-10-2018, 18:55

Originariamente inviato da sspintux

Sposta anche la chiusura del div map sopra il tag <script>.

P. S.
Scusa ma con il cell mi riesce scomodo farlo

Ciao a tutti e grazie per l' interesse!
Per dovere di cronaca...ci sono riuscito!!!
Sono stato fuori per 3 giorni in vacanza e non ho potuto lavorarci ma appena arrivato ho subito iniziato.
Allora, analizzando il flusso vedevo che l' elaborazione si spostava dal getJSON, che doveva riempire l' array, all' utilizzatore dello stesso, e dopo si riempiva, per cui ho pensato che era una questione di "sincronismo"

Ho quindi spostato tutto il codice in .done e TADAAAAA ha funzionato!!!

Grazie a tutti

**sspintux** · 07-10-2018, 19:59

Originariamente inviato da Alfaone78

Allora, analizzando il flusso vedevo che l' elaborazione si spostava dal getJSON, che doveva riempire l' array, all' utilizzatore dello stesso, e dopo si riempiva, per cui ho pensato che era una questione di "sincronismo"

Ho quindi spostato tutto il codice in .done e TADAAAAA ha funzionato!!!

...appunto

Originariamente inviato da sspintux

.....
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.

**Alfaone78** · 08-10-2018, 11:55

Ciao,

Originariamente inviato da sspintux

...appunto

tra le 10123432 * 10^229 prova che avevo fatto anche la chiamata $.ajax con async= false era stata atta, ma senza soluzione.
Non avevo visto la tua risposta precedente anche perchè non mi era stata notificata e dopo 3 giorni in vacanza pensando a questo problema avevo una moka in testa pronta ad esplodere. Appena davanti al pc di getto ho scritto ed ha subito funzionato.
In ogni caso, l' importante è esserci riusciti! Grazie, ti sono debitore comunque...
Birretta?

Leggere file JSON e caricarlo in una variabile

Strumenti

Potrebbero interessarti anche ...