[Webdesign] Comment charger des données JSON avec jQuery ?


Nos sites sont de plus en plus dynamique et rapide. Pour ajouter de la fluidité et de l’interactivité, il est devenu très fréquent de charger des données à la demande, en utilisant des mécanismes AJAX.

L’une des manière de transférer des données hiérarchisées est d’utiliser le format JSON.

{"menu": {
   "id": "file",
   "value": "File",
   "popup": {
     "menuitem": [
       {"value": "New", "onclick": "CreateNewDoc()"},
       {"value": "Open", "onclick": "OpenDoc()"},
       {"value": "Close", "onclick": "CloseDoc()"}
     ]
   }
 }}

La librairie jQuery propose des mécanismes pour charger et traiter ces données dynamiquement : .ajax(), .parseJSON() et .getJSON().

.getJSON()

La façon la plus simple de récupérer des données formatées en JSON est d’utiliser la méthode .getJSON() :

$.getJSON('/json/somedata.json', function(data) {
   // traitement sur les données ici
});

.ajax()

L’autre technique, consiste à utiliser la méthode .ajax() :

$.ajax({
  dataType: 'json',
  success: function(data) {
   // traitement sur les données ici
  },
  url: '/json/somedata.json'
});

Ces deux méthodes vont rapatrier le flux sous la forme d’une chaine de caractères qu’il faudra traiter. Vous pouvez convertir cette chaine en structure JSON (un tableau JS) en utilisant la méthode .parseJSON().

.parseJSON()

Si vous spécifiez le type de données json, jQuery devrait convertir automatiquement le flux récupéré en une structure JS, directement manipulable.
Mais si ce n’est pas le cas ou si vous souhaitez ajouter une étape ( de sécurité par exemple), alors, il vous faudra utiliser la méthode suivante :

data = $.parseJSON(string);

Au final, vous aurez un bout de code de la forme suivante :

$.ajax({
    dataType: 'text',
    success: function(string) {
    //étape suplémentaire ici
    data = $.parseJSON(string);
    // traitement sur les données ici
    },
    url: '/json/somedata.json'
});

Voila encore un petit truc simple pour les développeurs jQuery. Après tout, jQuery est fait pour ça, nous simplifier la vie.
Je cherchais ce genre de chose pour charger les pages suivantes ou les commentaires suivants sur le blog. mais je n’avais pas envie de me lancer dans de gros développement en JS pour y arriver.

Crédits: electrictoolbox