¿Cómo incluir datos JSON en JavaScript de forma sincrónica sin analizar?

Question

Quiero cargar un archivo JSON de mi propio servidor que contiene una matriz en una variable de objeto JavaScript.
Me gustaría hacerlo al comienzo de la carga de la página de forma sincrónica porque los datos son necesarios durante la carga de la página.

Logré usar jQuery.getJSON pero esto es asynch ajax y parece un poco exagerado.

¿Hay alguna manera de cargar JSON de forma sincronizada sin realizar su propio análisis?
(más o menos como usar un <script language="JavaScript" src="MyArray.json"></script>)

Gracias de antemano por cualquier ayuda, espero que tenga sentido ya que soy un novato de JavaScript. Paolo

Answer 1

getJSON() es simplemente la abreviatura de la función ajax() con el conjunto dataType:'json'. La función ajax() le permitirá personalizar mucho sobre la solicitud.

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

todavía utiliza una devolución de llamada con async:false pero dispara antes de que la ejecución continúa desde la llamada AJAX.

Answer 2

si estás usando un script del servidor de algún tipo, podría imprimir los datos de una etiqueta de script en la página:

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

Esto le permitirá utilizar sus datos de forma sincrónica en lugar de tratar para usar AJAX asincrónicamente

De lo contrario, tendrá que esperar la devolución de llamada AJAX antes de continuar con lo que sea que esté haciendo.

Answer 3

Aquí van:

// 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: Este código funciona en los navegadores modernos única - IE8, FF, Chrome, Opera, Safari. Para las versiones IE obosolete debe usar ActiveX, hágamelo saber si quiere que le diga cómo;)

Answer 4

Solo necesitaba leer un pequeño archivo de entrada proporcionado en formato json y extraer una pequeña cantidad de datos. Esto funcionó muy bien en las circunstancias:

archivo JSON es en el mismo directorio que el script y se llama data.json, se ve algo como esto:

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

leer los datos en js como este:

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

acceso a los elementos de datos como este:

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

Answer 5

me encontré con este breve tuto rial fácil de entender: Synch load of JSON in jQuery

Answer 6

Si RequireJS es una opción, puede hacerlo una dependencia utilizando requirejs. Lo uso para simular datos en mi aplicación angular. Es esencial que algunos de los datos falsos estén allí antes del arranque de la aplicación.

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

Simplemente ajuste los datos json en un definir y declararlo como una dependencia. Más información aquí: http://requirejs.org/docs/api.html#defsimple

Answer 7

AFAIK jQuery ha desaprobado las solicitudes XHR sincrónicas debido a la posibilidad de problemas de rendimiento. Puede intentar ajustar el código de la aplicación en el controlador de respuesta XHR de la siguiente manera:

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