web-dev-qa-db-fra.com

Comment inclure des données JSON en javascript de manière synchrone sans analyse?


Je veux charger un fichier JSON depuis mon propre serveur contenant un tableau dans une variable d'objet javascript.
Je voudrais le faire au début du chargement de la page de manière synchrone car les données sont nécessaires pendant le chargement de la page.

J'ai réussi à utiliser jQuery.getJSON, mais c'est asynch ajax et cela semble un peu exagéré.

Existe-t-il un moyen de charger JSON de manière synchronisée sans effectuer votre propre analyse?
(plus ou moins comme utiliser un <script language="JavaScript" src="MyArray.json"></script>)

Merci d'avance pour toute aide, j'espère que cela a du sens puisque je suis un débutant javascript. Paolo

javascriptjsonparsinggetjsonsynchronous
29
Paull

getJSON() est simplement un raccourci pour la fonction ajax() avec le paramètre dataType:'json'. La fonction ajax() vous permettra de personnaliser beaucoup la demande.

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

Vous utilisez toujours un rappel avec async:false Mais il se déclenche avant que son exécution ne continue à partir de l'appel ajax.

35
Alex Wayne

Voici:

// 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;
  }
}

REMARQUE: ce code fonctionne uniquement dans les navigateurs modernes - IE8, FF, Chrome, Opera, Safari. Pour les versions obsolètes IE versions vous devez utiliser ActiveX, faites-moi savoir si vous voulez que je vous dise comment;)

14
Boris Hamanov

si vous utilisez un script de serveur quelconque, vous pouvez imprimer les données dans une balise de script sur la page:

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

Cela vous permettra d'utiliser vos données de manière synchrone plutôt que d'essayer d'utiliser AJAX de manière asynchrone.

Sinon, vous devrez attendre le rappel AJAX avant de continuer avec ce que vous faites.

4
zzzzBov

Je n'avais besoin que de lire un petit fichier d'entrée fourni au format json et d'extraire une petite quantité de données. Cela a très bien fonctionné dans les circonstances:

le fichier json se trouve dans le même répertoire que le script et s'appelle data.json, il ressemble à ceci:

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

lire les données en js comme ceci:

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

Accédez aux éléments de données comme ceci:

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

Si RequireJS est une option, vous pouvez en faire une dépendance à l'aide de requirejs. Je l'utilise pour simuler des données dans mon Angular. Il est essentiel que certaines des données simulées soient là avant le bootstrap de l'application).

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

Enveloppez simplement les données json dans un define et déclarez-les comme une dépendance. Plus d'informations ici: http://requirejs.org/docs/api.html#defsimple

0
smets.kevin