Boucler sur des propriétés JSON

Dans le monde de la programmation JavaScript, il y en a qui ne jurent que par le langage dans sa forme la plus pure. D'autres, comme moi, ont appris à aimer ce langage de scripting lorsqu'ils ont découvert Prototype et jQuery qui permettait de faire abstraction des subtilités des fureteurs tout en ajoutant de puissantes fonctionnalités. Et comme moi tout à l'heure, après des années à utiliser ces frameworks au quotidien, j'ai réussi à oublier que le JS de base pouvait s'avérer utile pour nous sortir d'embarras.

J'avais une requête Ajax qui récupérait un array associatif que j'avais converti avec json_encode() de PHP.

$field['input_id_1'] = 'html 1';
$field['input_id_2'] = 'html 2';
$field['input_id_3'] = 'html 3';

echo json_encode($field);

Ce qui retourne un résultat comme le suivant :

{
  'input_id_1' : 'html 1',
  'input_id_2' : 'html 2',
  'input_id_3' : 'html 3'
}

Une fois la réponse récupérée par une requête Ajax, je voulais boucler sur chaque propriété pour attribuer la valeur de la clé à l'ID de l'élément du DOM (la clé JSON représente l'ID dans le HTML). Au début, j'ai eu le réflexe de regarder du côté de Enumerable.each dans Prototype, ensuite dans la fonction jQuery.each(). Ni un ni l'autre ne permettent de boucler sur les propriétés d'un objet JSON. Tout ce qui est possible de faire, c'est de boucler sur des éléments d'une liste.

C'est là que j'ai allumé qu'on pouvait le faire nativement, sans aucune librairie. À supposer une chaîne de caractère JSON comme celles-ci :

var json = "{ 'input_id_1' : 'value 1', 'input_id_2' : 'value 2', 'input_id_3' : 'value 3' }";
// ou
// var json = "{ 'title':'Code 18', 'url':'http://code18.blogspot.com', 'pagerank':'3' }";

On doit d'abord évaluer la chaîne JSON avec eval() en prenant soin de l'entourer de parenthèses (autrement vous pourriez voir le message invalid label apparaître dans la console de Firebug) :

var data = eval( "(" + json + ")");

for(var key in data){
  console.log(key + ' = ' + data[key]);

  // prototype
  // $(key).update(data[key]);

  // jquery
  // $j('#' + key).html(data[key]);
}

À titre de trace, ça affichera dans la console :

input_id_1 = value 1
input_id_2 = value 2
input_id_3 = value 3