Comment utiliser les modèles jquery avec des données JSON?

Question

J'essaye d'écrire du code de jquery pour récupérer une liste de serveurs d'un compte de nuage et les montrer dans une table. Quand je charge ma page, mon javascript s'exécute et le bon JSON est renvoyé, mais quand j'essaie d'utiliser un template jquery pour générer mon HTML, je n'ai jamais de résultat. Quelqu'un peut-il m'aider à comprendre où est mon problème?

Javascript pour extraire des données de serveur

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      url: '../../api/server/getservers', 
      type: 'POST', 
      success: function (result) { 
       $('#serverTemplate').tmpl(result).appendTo('#serverTable'); 
      }, 
     }); 
    }); 
</script> 

Jquery modèle Javascript

<script id="serverTemplate" type="text/x-jQuery-tmpl"> 
    {{each servers}} 
     <tr> 
      <td>${status}</td> 
      <td>${name}</td> 
     </tr> 
    {{/each}} 
</script> 

HTML

<table> 
    <thead> 
     <tr> 
      <th>Status</th> 
      <th>Server Name</th> 
     </tr> 
    </thead> 
    <tbody id="serverTable"> 

    </tbody> 
</table> 

JSON Exemple

{ 
    "servers": [ 
     { 
      "progress": 100, 
      "id": 11111111, 
      "imageId": 1, 
      "flavorId": 1, 
      "status": "ACTIVE", 
      "name": "SERVER-1", 
      "hostId": "abcdefghijklmnopqrstuvwxyz", 
      "addresses": { 
       "public": [ 
        "1.1.1.1" 
       ], 
       "private": [ 
        "2.2.2.2" 
       ] 
      }, 
      "metadata": {} 
     }, 
     { 
      "progress": 100, 
      "id": 22222222, 
      "imageId": 2, 
      "flavorId": 2, 
      "status": "ACTIVE", 
      "name": "Server-2", 
      "hostId": "zxywufvslakdkdkdkdkdkdkdkdk", 
      "addresses": { 
       "public": [ 
        "3.3.3.3" 
       ], 
       "private": [ 
        "4.4.4.4" 
       ] 
      }, 
      "metadata": {} 
     } 
    ] 
} 

• version jQuery 1.5.1
• jQuery-tmpl la version beta 1

Answer 1

J'ai résolu le problème en modifiant la fonction de la réussite et l'ajout d'une analyse syntaxique explicite le JSON à un tableau.

var servers = jQuery.parseJSON(result); 
$('#serverTemplate').tmpl(servers).appendTo('#serverTable');