mostrar - recorrer array de objetos javascript

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

Question

Quiero cargar un archivo JSON desde 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 se necesitan datos 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 hacer tu 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

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 como se muestra a continuación:

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

Answer 2

Aqui tienes:

// 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 solo en navegadores modernos: IE8, FF, Chrome, Opera, Safari. Para versiones de IE obsoletas debes usar ActiveX, avísame si quieres que te diga cómo;)

Answer 3

Encontré este breve tutorial fácil de entender: hippieitgeek.blogspot.se/2013/06/…

Answer 4

La forma moderna de HTML5 sin jQuery sería:

 var url="https://api.myjson.com/bins/1hk8lu" || "my.json"
var ok=await fetch(url)
var json=await ok.json()
alert(a.test)

Answer 5

Si RequireJS es una opción, puede hacerlo una dependencia usando 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 envuelva los datos json en una definición y declare como una dependencia. Más información aquí: http://requirejs.org/docs/api.html#defsimple

Answer 6

Si está utilizando un script de servidor de algún tipo, puede imprimir los datos en 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 síncrona en lugar de intentar usar AJAX de forma asíncrona.

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

Answer 7

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

json file está en el mismo directorio que el script y se llama data.json, se ve más o menos así:

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

lee los datos en js como este:

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

Acceda a los elementos de datos como este:

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

Answer 8

getJSON() es simplemente una abreviatura de la función ajax() con el tipo de datos dataType:''json'' establecido. La función ajax() te permitirá personalizar mucho sobre la solicitud.

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

Aún usa una devolución de llamada con async:false pero se dispara antes de que la ejecución continúe desde la llamada ajax.