JQuery $.each traverse l'objet tableau JavaScript instances_jquery

Affichez un exemple jQuery simple pour parcourir un objet 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 bien, invitant « pomme », « orange »… etc., comme prévu.
Problème : chaîne JSON

L'exemple suivant 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, l'erreur suivante s'affiche dans la console :

Uncaught TypeError : impossible d'utiliser l'opérateur 'in' pour rechercher '156'
dans [{"id":"1","tagName":"apple"}...

Solution : Convertissez la chaîne JSON en objet JavaScript.
Pour résoudre ce problème, convertissez-le en objet JavaScript via le standard JSON.parse() ou le $.parseJSON de jQuery.

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