Comment analyser un Json liste comme ça et afficher ses éléments en HTML?

J'ai reçu un objet Json en utilisant jQuery getjson() la méthode comme ça:

<script>

$(document).ready(function(){

  $("button").click(function(){
    $.getJSON(the_api_url, {}, function(data) {
        //do something
    });
  });
  });

});

</script>

Les données est un tableau de la liste, et son format est comme ceci:

[
    {
        id : "001",
        name : "apple",
        class : "fruit",
        colour : "red"
    },
    {
        id : "002",
        name : "melon",
        class : "fruit",
        colour : "green"
    },
    {
        id : "003",
        name : "banana",
        class : "fruit",
        colour : "yellow"
    }
]

Je suis nouveau sur le JavaScript et ne sais pas comment analyser et de les afficher dans la page html. Pourriez-vous les gars aidez moi avec le code de l' '//faire quelque chose"?

regardez doc api pour la manipulation dom api.jquery.com/category/manipulation/dom-insertion-inside
regardez comment utiliser des méthodes comme html(), append() etc
Arun P Johny. Vous voyez encore une fois:). Je suis en train de l'apprendre. pourriez-vous me donner un exemple de code?
reportez-vous au code de la stackoverflow.com/questions/4189365/...
Vous avez un supplément de }); dans votre code

OriginalL'auteur Jane | 2013-08-23

  1. 4

    Ajouter un élément html comme

    <ul id="ct"></ul>

    puis

    $(document).ready(function(){

    $("button").click(function(){
        $.getJSON(the_api_url, {}, function(data) {
            var $ul = $('#ul')
            $.each(data, function(idx, item){
                $ul.append('<li style="color: ' + item.color + '">' + item.name + '-' + item['class'] +'</li>')
            })
        });
    });
});
    Serait probablement utile de appendChild la lis à la ul 🙂
    raté pour ajouter l'élément... merci
    Je suis à l'aide de .each mais c'est en affichant uniquement la dernière valeur.Le .append est dans un 2 imbriqués .chaque. jQuery.each(arrayobj, function(key, value){ jQuery.each(value, function(label, answer){ display = '<tr><td>'+label+ '</td><td>' +answer+'</td></tr>'}); }); $('#tbody').append(display);

    OriginalL'auteur Arun P Johny