+ Rispondi al messaggio
Pagina 1 di 2 12 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 15

Leggere file JSON e caricarlo in una variabile

  1. #1
    Alfaone78 non è in linea Scolaretto
    Post
    207
    Like Inviati  
    0
    Like Ricevuti  
    0
    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
    ℹ️ Leggi di più su Alfaone78 ...

  2. #2
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Post
    1,397
    Like Inviati  
    0
    Like Ricevuti  
    20
    Quote Originariamente inviato da Alfaone78 Visualizza il messaggio
    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!
    ℹ️ Leggi di più su _alka_ ...

  3. #3
    Alfaone78 non è in linea Scolaretto
    Post
    207
    Like Inviati  
    0
    Like Ricevuti  
    0
    Quote Originariamente inviato da _alka_ Visualizza il messaggio
    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
    ℹ️ Leggi di più su Alfaone78 ...

  4. #4
    Alfaone78 non è in linea Scolaretto
    Post
    207
    Like Inviati  
    0
    Like Ricevuti  
    0
    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
    ℹ️ Leggi di più su Alfaone78 ...

  5. #5
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Post
    1,397
    Like Inviati  
    0
    Like Ricevuti  
    20
    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!
    ℹ️ Leggi di più su _alka_ ...

  6. #6
    Alfaone78 non è in linea Scolaretto
    Post
    207
    Like Inviati  
    0
    Like Ricevuti  
    0
    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
    ℹ️ Leggi di più su Alfaone78 ...

  7. #7
    Alfaone78 non è in linea Scolaretto
    Post
    207
    Like Inviati  
    0
    Like Ricevuti  
    0
    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
    ℹ️ Leggi di più su Alfaone78 ...

  8. #8
    Post
    1,900
    Blogs
    21
    Like Inviati  
    14
    Like Ricevuti  
    13
    Ciao,
    fossi in te proverei a spostare tutto il codice javascript che carica la mappa nel document.ready di jquery.
    ℹ️ Leggi di più su sspintux ...

  9. #9
    Alfaone78 non è in linea Scolaretto
    Post
    207
    Like Inviati  
    0
    Like Ricevuti  
    0
    Quote Originariamente inviato da sspintux Visualizza il messaggio
    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
    ℹ️ Leggi di più su Alfaone78 ...

  10. #10
    Post
    1,900
    Blogs
    21
    Like Inviati  
    14
    Like Ricevuti  
    13
    Non provato;
    ho aggiunto un paio di righe nel tuo codice.

    Quote Originariamente inviato da Alfaone78 Visualizza il messaggio
    <!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
    ℹ️ Leggi di più su sspintux ...

+ Rispondi al messaggio
Pagina 1 di 2 12 ultimoultimo

Potrebbero interessarti anche ...

  1. XML o Json
    Da dante.3d nel forum Delphi
    Risposte: 10
    Ultimo Post: 14-12-2018, 17:20
  2. Risposte: 1
    Ultimo Post: 01-10-2018, 12:46
  3. Passare slash da variabile php a json
    Da Bivio nel forum PHP
    Risposte: 2
    Ultimo Post: 09-08-2017, 09:30
  4. Leggere variabile strutturata da file binario
    Da Chico nel forum Visual Basic .Net
    Risposte: 11
    Ultimo Post: 07-09-2015, 09:35
  5. Risposte: 1
    Ultimo Post: 08-06-2010, 19:41