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

Discussione: Leggere file JSON e caricarlo in una variabile

  1. #1
    Alfaone78 non è in linea Scolaretto
    Luogo
    Catania - Italia
    Post
    207

    Leggere file JSON e caricarlo in una variabile

    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)
    codice:
    <!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

    codice:
    [
        {
            "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
    Saluti

    Salvo AKA AlfaOne

    Se ti e' piaciuto un post puoi commentarlo. Se e' il mio commentalo
    [COLOR=royalblue]
    Un recente sondaggio ha rilevato che mai nessuno e' morto premendo F1.

  2. #2
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Luogo
    Reggio Emilia
    Post
    1,110
    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!
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Homepage | Blog | Delphi Podcast | Delphi Succinctly (e-book)

  3. #3
    Alfaone78 non è in linea Scolaretto
    Luogo
    Catania - Italia
    Post
    207
    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

    codice:
    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
    Saluti

    Salvo AKA AlfaOne

    Se ti e' piaciuto un post puoi commentarlo. Se e' il mio commentalo
    [COLOR=royalblue]
    Un recente sondaggio ha rilevato che mai nessuno e' morto premendo F1.

  4. #4
    Alfaone78 non è in linea Scolaretto
    Luogo
    Catania - Italia
    Post
    207
    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

    codice:
    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

    codice:
    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
    Saluti

    Salvo AKA AlfaOne

    Se ti e' piaciuto un post puoi commentarlo. Se e' il mio commentalo
    [COLOR=royalblue]
    Un recente sondaggio ha rilevato che mai nessuno e' morto premendo F1.

  5. #5
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Luogo
    Reggio Emilia
    Post
    1,110
    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!
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Homepage | Blog | Delphi Podcast | Delphi Succinctly (e-book)

  6. #6
    Alfaone78 non è in linea Scolaretto
    Luogo
    Catania - Italia
    Post
    207
    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
    Saluti

    Salvo AKA AlfaOne

    Se ti e' piaciuto un post puoi commentarlo. Se e' il mio commentalo
    [COLOR=royalblue]
    Un recente sondaggio ha rilevato che mai nessuno e' morto premendo F1.

  7. #7
    Alfaone78 non è in linea Scolaretto
    Luogo
    Catania - Italia
    Post
    207
    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

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


    Ecco il codice getjson

    codice:
    $.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
    Saluti

    Salvo AKA AlfaOne

    Se ti e' piaciuto un post puoi commentarlo. Se e' il mio commentalo
    [COLOR=royalblue]
    Un recente sondaggio ha rilevato che mai nessuno e' morto premendo F1.

  8. #8
    L'avatar di sspintux
    sspintux non è in linea Very Important Person Ultimo blog: Mappa Italia senza le Google API
    Luogo
    Lazio
    Post
    1,576
    Blogs
    20
    Ciao,
    fossi in te proverei a spostare tutto il codice javascript che carica la mappa nel document.ready di jquery.
    Ciao sspintux
    ------------------------------------------------------------

    O Santo Protettore dell'informatico quadratico medio, se puoi allontana da me questo cetriolo amaro!
    Azz! ... questo è un grande porck-around; potremmo addirittura farlo passare per una funzionalità avanzata

  9. #9
    Alfaone78 non è in linea Scolaretto
    Luogo
    Catania - Italia
    Post
    207
    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
    Saluti

    Salvo AKA AlfaOne

    Se ti e' piaciuto un post puoi commentarlo. Se e' il mio commentalo
    [COLOR=royalblue]
    Un recente sondaggio ha rilevato che mai nessuno e' morto premendo F1.

  10. #10
    L'avatar di sspintux
    sspintux non è in linea Very Important Person Ultimo blog: Mappa Italia senza le Google API
    Luogo
    Lazio
    Post
    1,576
    Blogs
    20
    Non provato;
    ho aggiunto un paio di righe nel tuo codice.

    Quote Originariamente inviato da Alfaone78 Visualizza il messaggio
    codice:
    <!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

    codice:
    [
        {
            "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
    Ciao sspintux
    ------------------------------------------------------------

    O Santo Protettore dell'informatico quadratico medio, se puoi allontana da me questo cetriolo amaro!
    Azz! ... questo è un grande porck-around; potremmo addirittura farlo passare per una funzionalità avanzata

+ Rispondi al Thread
Pagina 1 di 2 12 ultimoultimo

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi