Comment construire une liste non-ordonnée de manière dynamique à partir de données json

Question

Comment modifier cette fonction qui génère dynamiquement une liste déroulante afin que je puisse créer dynamiquement une liste désordonnée à partir de données json.

</script> 
    <script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     jQuery .getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) { 
      $.each(jsonData, function (i, j) { 
       document.index.spec_list.options[i] = new Option(j.options); 
     }); 
    });}); 
</script> 

* spec_list * est id de menu déroulant dire 'select' ici & Options (à savoir dans j.options) est le champ dans le tableau réception des données JSON. J'ai maintenant 'msg' seul champ de table dont les données doivent être utilisées pour remplir dynamiquement 'ul id = "msg"'.

Answer 1

Il semble donc que vous voulez ajouter li éléments à un existant ul avec l'ID « msg », où le contenu de chaque li provient de la propriété .msg de chaque entrée dans le jsonData:

jQuery.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) { 
    var markup; 

    markup = []; 
    jQuery.each(jsonData, function (i, j) { 
     // Note: Be sure you escape `msg` if you need to; if it's already 
     // formatted as HTML, you're fine without as below 
     markup.push("<li>"); 
     markup.push(j.msg); 
     markup.push("</li>"); 
    }); 

    jQuery('#msg').append(markup.join("")); 
}); 

Here's a working example. (Voir le « hors-sujet » commentaire ci-dessous;. L'exemple de travail utilise l'une des astuces mentionnées)

Ou si les nouvelles li s devraient remplacer ceux qui existent déjà dans le ul, utilisez

jQuery('#msg').html(markup.join("")); 

... au lieu de . De toute façon, cela utilise le célèbre "construire dans un tableau, puis join" idiome pour construire le balisage, qui est presque toujours plus efficace (dans les implémentations JavaScript) que la concaténation de chaînes. (Et construire le balisage d'abord, puis l'appliquer avec un seul appel de manipulation DOM [dans ce cas via jQuery] sera définitivement être plus efficace que d'ajouter chaque li individuellement). Si vous n'êtes pas préoccupé par l'efficacité (cela montre le résultat d'un appel Ajax, après tout, et si vous savez qu'il n'y a qu'un couple de li à ajouter ...), vous pouvez le faire comme ceci:

jQuery.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) { 
    var ul; 

    ul = jQuery('#msg'); 
    // If you want to clear it first: ul.empty(); 
    jQuery.each(jsonData, function (i, j) { 
     // Note: Be sure you escape `msg` if you need to; if it's already 
     // formatted as HTML, you're fine without as below 
     ul.append("<li>" + j.msg + "</li>"); 
    }); 
}); 

... mais si vous avez affaire à un grand nombre d'articles, ou si vous faisiez quelque chose qui est arrivé souvent, vous êtes probablement mieux avec l'accumulation it-up Version . Hors-sujet: Votre code original se mélange à l'aide du symbole jQuery et du symbole $.

Probablement préférable de coller à l'un ou l'autre, donc je suis allé avec jQuery ci-dessus. Si vous n'utilisez pas noConflict, ou si vous faites l'un des trucs astucieux pour l'utilisation noConflict mais toujours en mesure d'utiliser $, vous pouvez sans risque changer le dessus en utilisant $ partout.