Parcourir et lire JSON avec jQuery - for et $.each

Reverrons cet exemple simple de jQuery pour parcourir un tableau d'objets de JavaScript.

var json = [
 {"id":"1","text":"paris"},
 {"id":"2","text":"marseille"},
 {"id":"3","text":"lille"},
 {"id":"4","text":"metz"},
 {"id":"5","text":"renne"}
];

$.each(json, function(i, obj) {
 alert(obj.text);
});

L'exécution de cet exemple déroule correctement et les villes sont affichées dans une boite d'alerte. Un problème fréquent concernant la déclaration d'un JSON de type string avec un seul ou double quottes.

var json = '[{"id":"1","ville":"paris"},{"id":"2","ville":"marseille"},
{"id":"3","ville":"lille"},{"id":"4","ville":"metz"},
{"id":"5","ville":"renne"}]';
 
$.each(json, function(i, obj) {
 alert(obj.ville);
});

Le navigateur Chrome affiche cette erreur dans la console:

Uncaught TypeError: Cannot use 'in' operator to search for ... 
in [{"id":"1","ville":"paris"}...

La solution idéale est de convertir JSON en un objet JavaScript avec la fonction JSON.parse() ou la fonction jQuery $.parseJSON.

$.each(JSON.parse(json), function(i, obj) {
 alert(obj.ville);
});

//ou

$.each($.parseJSON(json), function(i, obj) {
 alert(obj.ville);
});

Exemple de JSON et la boucle JavaScript for

L'exemple suivant montre comment parcourir un objet JSON en utilisant la boucle for de JavaScript.

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>exemple de la boucle javascript for et JSON</title>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<script>
$(function() {

var data = [
 {"id":"1","name":"Un"},
 {"id":"2","name":"Deux"},
 {"id":"3","name":"Trois"},
 {"id":"4","name":"Quatre"},
 {"id":"5","name":"Cinq"}
];
 
var data_length = data.length;
for (var i = 0; i < data_length; i++) {
 alert(data[i]["id"] + " " + data[i]["name"]);
}
});
</script>
</body>
</html>

Ressources:
jQuery each() method
How to iterate json data in jquery

Parcourir et lire JSON avec jQuery - for et $.each

Exemple de JSON et la boucle JavaScript for

AdBlock Detected