Leggere file JSON e caricarlo in una variabile

**Alfaone78** · 03-10-2018, 22:20

Salve a tutti,
premessona: con java e jquery ho poco a che fare, lo mastico poco e male in quanto non è il mio linguaggio di programmazione.
Purtroppo ho sotto mano questo progettino che mi piace ma la mia limitazione in JS e JQR mi bloccano ad un punto morto.
Premessona 2: ho googlato, provato, testato(anche contro al muro) ma nisba.

Passiamo al dunque
Avendo la necessità di creare una mappa Italia SENZA usare le API di google, una cosa semplicissima, mi sono imbattuto in questo codice davvero funzionale e semplice

https://www.sitepoint.com/dynamic-geo-maps-svg-jquery/

Ho creato il file CSS e integrato all' interno del HTML, aggiunto il riferimento al Jquery e inserito il JSON all' interno del codice, e fin qui tutto bene.
Il problema è che a me servirebbe mantenere il JSON come file esterno, dato che viene creato da DB da una mia applicazione.
Dovrei quindi leggere il file JSON(che ho chiamato mappa.json) e "riempire" la variabile regions, ma non ci riesco
Ecco il codice(ho tagliato alcune parti ripetitive riguardo la costruzione dell' SVG , messo in grassetto e sottolineato il codice da me aggiunto per tentare di caricare il file JSON)

<!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>
  <script>
  
var regions;
$.getJSON('mappa.json')
.done(function (data) {
regions = data;
});


var 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>
</div>

  </body>
</html>

Il file JSON contiene questo


[
    {
        "region_name": "Lombardia",
        "region_code": "lom",
        "population": 1,
		"indice":10
    },
    {
        "region_name": "Campania",
        "region_code": "cam",
        "population": 8,
		"indice":10
    },
    {
        "region_name": "Lazio",
        "region_code": "laz",
        "population": 4,
		"indice":10
    }
.....le altre le ho tagliate per semplificare
];

A questo punto mi chiedo...dove sbaglio?
Grazie a tutti
e buon Lavoro
Salvo

**_alka_** · 04-10-2018, 01:05

Originariamente inviato da Alfaone78

Salve a tutti,
Dovrei quindi leggere il file JSON(che ho chiamato mappa.json) e "riempire" la variabile regions, ma non ci riesco

Il problema è proprio su quel "non ci riesco": devi indicare qual è l'effetto che ottieni, se si tratta di un errore sulla console di JavaScript, un risultato diverso da quello atteso (e quale) e così via, giusto per iniziare a fare qualche ipotesi.

Ciao!

**Alfaone78** · 04-10-2018, 07:22

Originariamente inviato da _alka_

Il problema è proprio su quel "non ci riesco": devi indicare qual è l'effetto che ottieni, se si tratta di un errore sulla console di JavaScript, un risultato diverso da quello atteso (e quale) e così via, giusto per iniziare a fare qualche ipotesi.

Ciao!

Salve Marco,

in effetti ho dimenticato la console...
Ecco gli errori che mi da

jquery.min.js:4 Failed to load file:///C:/Users/Salvo/Desktop/mappa.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Test.html:132 Uncaught TypeError: Cannot read property 'map' of undefined
    at Test.html:132

In pratica quei valori non li carica proprio.
Inizialmente i valori erano all' interno dello stesso JSON in cui all' inizio ci stava scritto: regions = ecc.... e lo includevo alla pagina tramite link rel...
Solo che in effetti il JSON credo non debba essere scritto in quel modo, ma senza nomevariabile=

Gerazie ancora
Salvo

**Alfaone78** · 04-10-2018, 09:39

EDIT: Ho risolto 1 problema dei 2 sopra, ovvero il primo, in quanto ho potuto capire da altre googlate che il caricamento del file viene bloccato in locale.Messo tutto su server adesso il primo errore non lo da

jquery.min.js:4 Failed to load file:///C:/Users/Salvo/Desktop/mappa.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Purtroppo continua a dare questo

Test.html:132 Uncaught TypeError: Cannot read property 'map' of undefined
    at Test.html:132

come se in effetti non si riuscisse a caricare il file o lo fa in altro momento o..non so come "analizzare il flusso", fosse stato vb.net o C# non avrei avuto problemi, ma qui...ambiente ostico per me ;-)
SE funzionasse, passando il mouse sule regioni dovrebbe fare apparire dei dati(nome regione e popolazione)
Inoltre la mappa dovrebbe essere colorata di varie tonalità di azzurro in base alla densità di popolazione relativa.

Per comodità di chi volesse aiutarmi ecco i link ai file
PAGINA
CSS
JSON

Grazie mille

**_alka_** · 04-10-2018, 21:04

I file devono essere obbligatoriamente pubblicati e fruiti su un Web server per poter applicare determinare "regole" di sicurezza che, altrimenti, ti impediscono di eseguire appieno lo script, ma questo problema direi che l'hai risolto.

Osservando i link che hai pubblicato, l'errore che viene restituito è questo:
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 122 column 2 of the JSON data

Direi che il problema è da individuare nel carattere ";" che si trova alla fine del file JSON e che va sicuramente rimosso.

Prova a fare la correzione e verifica se ora funziona tutto.

Ciao!

**Alfaone78** · 04-10-2018, 21:57

Salve Marco,
ho provveduto ad eliminare il ; ma non cambia nulla.
Sto cercando con moltissime difficoltà di risolvere da me, ci sbatto la testa ma non trovo il punto.
Analizzando il codice con chrome mi dice che non puo' fare il .map di una variabile non definita(riga 132).
Questo perche' sicuramente il getjson non passa nulla alla variabile regions, ma non riesco a capire come mai.
Sicuramente è qualcosa di stupido che però ancora non si trova.

Altre idee???

Ciao e grazie per il tempo che dedichi

**Alfaone78** · 04-10-2018, 22:49

Allora, altre prove, stesso risultato ma

mi sono messo con i breakpoint e la console di chrome per capirci qualcosa
Attualmente succede una cosa strana

il codice getJSON carica region DOPO la chiamata

var temp_array= regions.map(function(item){
    return item.clienti;
});

Ecco il codice getjson

$.getJSON('mappa.json',function(regions){
console.log(regions);
});

Infatti se metto un paio di punti di arresto noto che alla fine mi logga i valori del file correttamente.
Per cui, per qualche ancora oscuro motivo i dati li carica ma non al momento giusto.

Spero che questa mia altra analisi possa essere utile, anche per far capire....che non ci dormo sopra!

Per completezza ecco uno SCREENSHOT della mia analisi su chrome

**sspintux** · 05-10-2018, 08:43

Ciao,
fossi in te proverei a spostare tutto il codice javascript che carica la mappa nel document.ready di jquery.

**Alfaone78** · 05-10-2018, 09:58

Originariamente inviato da sspintux

Ciao,
fossi in te proverei a spostare tutto il codice javascript che carica la mappa nel document.ready di jquery.

Ciao sspintux,

avrai certamente ragione, ma io non sono un programmatore Jscript o java, programmo .net e questa è un' esigenza nata dal fatto di interfacciare quella pagina ad un file JSON che crea una mia applicazione.

Analizzando, per quello che sono le mie capacità, ho visto che l' array regions viene si riempito da getJSON, ma in un secondo momento.

A questo punto, dopo aver analizzato 1000000 di codici non so cosa fare, ho provato e riprovato da 3 giorni, ma il risultato è sempre lo stesso, anzi, adesso l' array lo carico ma...fuori tempo.
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.
Onestamente credevo fosse una cosa semplice adattare il codice originale a questa esigenza, del resto si trattava di caricare i dati da un file esterno anzichè embedded, ma...non ho calcolato le mie capacità.

Ergo, se riusciste a guidarmi in maniera più specifica... ne sarei felice!

Grazie

**sspintux** · 05-10-2018, 10:14

Non provato;
ho aggiunto un paio di righe nel tuo codice.

Originariamente inviato da Alfaone78

<!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>
  <script>
  
// ----
$(document).ready(function(){

var regions;
$.getJSON('mappa.json')
.done(function (data) {
regions = data;
});


var 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>
</div>

  </body>
</html>

Il file JSON contiene questo


[
    {
        "region_name": "Lombardia",
        "region_code": "lom",
        "population": 1,
		"indice":10
    },
    {
        "region_name": "Campania",
        "region_code": "cam",
        "population": 8,
		"indice":10
    },
    {
        "region_name": "Lazio",
        "region_code": "laz",
        "population": 4,
		"indice":10
    }
.....le altre le ho tagliate per semplificare
];

A questo punto mi chiedo...dove sbaglio?
Grazie a tutti
e buon Lavoro
Salvo

Leggere file JSON e caricarlo in una variabile

Strumenti

Potrebbero interessarti anche ...