Come includere i dati JSON in javascript in modo sincrono senza analisi?

Question

Desidero caricare un file JSON dal mio server contenente una matrice in una variabile Object javascript.
Mi piacerebbe farlo all'inizio del caricamento della pagina in modo sincrono perché i dati sono necessari durante il caricamento della pagina.

Sono riuscito a utilizzare jQuery.getJSON ma questo è asynch ajax e sembra un po 'eccessivo.

C'è un modo per caricare JSON in modo sincrono senza eseguire la propria analisi?
(più o meno come utilizzare un <script language="JavaScript" src="MyArray.json"></script>)

Grazie in anticipo per qualsiasi aiuto, spero che abbia senso poiché sono un principiante javascript. Paolo

Answer 1

getJSON() è semplicemente una scorciatoia per la funzione ajax() con il set dataType:'json'. La funzione ajax() ti consente di personalizzare molto sulla richiesta.

$.ajax({ 
    url: 'MyArray.json', 
    async: false, 
    dataType: 'json', 
    success: function (response) { 
    // do stuff with response. 
    } 
}); 

È ancora utilizzare un callback con async:false ma spara prima che l'esecuzione continua da chiamata AJAX.

Answer 2

se si sta utilizzando uno script server di qualche tipo, è possibile stampare i dati di un tag script nella pagina:

<script type="text/javascript"> 
var settings = <?php echo $json; ?>; 
</script>

Questo vi permetterà di utilizzare i dati in modo sincrono, piuttosto che cercare usare AJAX in modo asincrono.

Altrimenti dovrete attendere il callback AJAX prima di continuare con qualunque cosa stiate facendo.

Answer 3

Qui si va:

// Load JSON text from server hosted file and return JSON parsed object 
function loadJSON(filePath) { 
    // Load json file; 
    var json = loadTextFileAjaxSync(filePath, "application/json"); 
    // Parse json 
    return JSON.parse(json); 
} 

// Load text with Ajax synchronously: takes path to file and optional MIME type 
function loadTextFileAjaxSync(filePath, mimeType) 
{ 
    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.open("GET",filePath,false); 
    if (mimeType != null) { 
    if (xmlhttp.overrideMimeType) { 
     xmlhttp.overrideMimeType(mimeType); 
    } 
    } 
    xmlhttp.send(); 
    if (xmlhttp.status==200) 
    { 
    return xmlhttp.responseText; 
    } 
    else { 
    // TODO Throw exception 
    return null; 
    } 
} 

NOTA: Questo codice funziona nei browser moderni solo - IE8, FF, Chrome, Opera, Safari. Per le versioni IE obosolete devi usare ActiveX, fammi sapere se vuoi che ti dirò come;)

Answer 4

Ho solo bisogno di leggere un piccolo file di input fornito in formato json ed estrarre una piccola quantità di dati. Questo ha funzionato bene nelle circostanze:

di file JSON è nella stessa directory dello script e si chiama data.json, sembra qualcosa di simile:

{"outlets":[ 
     { 
      "name":"John Smith", 
      "address":"some street, some town", 
      "type":"restaurant" 
     }, 
..etc... 

leggere i dati in js come questo:

var data = <?php echo require_once('data.json'); ?>; 

accedere alle voci di dati di questo tipo:

for (var i in data.outlets) {  
var name = data.outlets[i].name; 
... do some other stuff... 
} 

Answer 5

ho trovato questa breve tuto rial facile da capire: Synch load of JSON in jQuery

Answer 6

Se RequireJS è un'opzione, è possibile renderlo una dipendenza utilizzando requirejs. Lo uso per simulare i dati nella mia applicazione Angolare. È essenziale che alcuni dei dati derisi siano presenti prima del bootstrap dell'app.

//Inside file my/shirt.js: 
define({ 
    color: "black", 
    size: "unisize" 
}); 

Basta avvolgere i dati JSON in un define e dichiararlo come dipendenza. Maggiori informazioni qui: http://requirejs.org/docs/api.html#defsimple

Answer 7

AFAIK jQuery ha deprecato richieste XHR sincrone a causa dei potenziali problemi di prestazioni. Puoi provare a racchiudere il codice della tua app nel gestore di risposta XHR come nel seguente:

$(document).ready(function() { 
    $.get('/path/to/json/resource', function(response) { 
    //'response' now contains your data 
    //your app code goes here 
    //... 
    }); 
});