Boucle jQuery sur une chaîne JSON

Boucle jQuery sur une chaîne JSON - exemple $ .each

Passez en revue un exemple simple de jQuery pour effectuer une boucle sur un objet de tableau JavaScript.

var json = [
    {"id":"1","tagName":"apple"},
    {"id":"2","tagName":"orange"},
    {"id":"3","tagName":"banana"},
    {"id":"4","tagName":"watermelon"},
    {"id":"5","tagName":"pineapple"}
];

$.each(json, function(idx, obj) {
    alert(obj.tagName);
});

L'extrait de code ci-dessus fonctionne très bien, invite le "apple", "orange" ... comme prévu.

Problème: chaîne JSON

Consultez l'exemple ci-dessous, déclare directement une chaîne JSON (entre guillemets simples ou doubles).

var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';

$.each(json, function(idx, obj) {
    alert(obj.tagName);
});

Dans Chrome, il affiche les erreurs suivantes dans la console:

Uncaught TypeError: Cannot use 'in' operator to search for '156'
in [{"id":"1","tagName":"apple"}...

Solution: convertir la chaîne JSON en objet JavaScript

Pour le corriger, le convertit en objet Javascript via le standardJSON.parse() ou jQuery$.parseJSON.

var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';

$.each(JSON.parse(json), function(idx, obj) {
    alert(obj.tagName);
});

//or

$.each($.parseJSON(json), function(idx, obj) {
    alert(obj.tagName);
});

Note
La plupart des applications Web renverront directement une chaîne au format JSON, vous devez la convertir en objet JavaScript avant de l'analyser avec jQuery.

TOC

Boucle jQuery sur une chaîne JSON - Exemple: $ .each