En utilisant Jquery pour obtenir des objets JSON de fichier local

Question

Je suis en train d'obtenir une liste d'objets JSON (produits) à partir d'un fichier local en utilisant Jquery et stocker tous les objets dans un tableau unique appelé AllItems. Le fichier est co-situé dans le même répertoire que le code, et il est appelé « allItems.json ». Voici comment je le fais maintenant:

function getAllSupportedItems(){
    var allItems = new Array();
    $.getJSON("allItems.json",
         function(data){
             $.each(data.items, 
             function(item){
                 allItems.push(item);
             });
         });
    return allItems;
}

Sur la base de cet exemple: http://api.jquery.com/jQuery.getJSON/

Answer 1

Pour getAllSupportedItems pour pouvoir retourner les articles, les besoins d'appels AJAX pour exécuter de manière synchrone.

getJSON se traduit par l'appel asynchrone suivant:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

Asynchronous est la valeur par défaut. Vous devez donc changer explicitement votre demande à un synchrone:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback,
  async: false
});

Une autre solution consiste à repenser la façon dont vous utilisez getAllSupportedItems et d'en faire un utilitaire asynchrone:

function getAllSupportedItems(callback){
    $.getJSON("allItems.json",
         function(data){
             var allItems = [];
             $.each(data.items, 
             function(item){
                 allItems.push(item);
             });
             callback(allItems);
             // callback(data.items); should also work
         });
}

---

Mise à jour

Quand j'ai écrit d'abord cette réponse, jQuery n'a pas intégré à l'appui différé. Il est beaucoup plus concis et flexible pour faire quelque chose comme aujourd'hui:

function getAllSupportedItems( ) {
    return $.getJSON("allItems.json").then(function (data) {
        return data.items;
    });
}

// Usage:
getAllSupportedItems().done(function (items) {
    // you have your items here
});

Answer 2

Comment utilisez-vous cela? Si vous vous attendez à la fonction principale ( « de getAllSupportedItems ») retour le tableau que vous faites, bien ça ne marchera pas. La fonction $.getJSON est asynchrone , et donc le gestionnaire ne construira pas en fait le tableau jusqu'à ce que la fonction externe est de retour.