Comment insérer un objet JSON dans une liste non ordonnée

Question

J'ai un objet JSON que j'ai créé avec obj= json.parse (données)."Données" a été reçue à partir d'un serveur Web.Je sais que l'objet est correct car je peux imprimer des variables simples de celle-ci dans une DIV ou ma liste.

C'est ce que l'objet JSON est créé à partir de:

[{"Nom": "Staurikosaurus", "Groupe": "Saurischia", "Régime": "Carnivore", "Période": "Triassic"}, {"Nom": "Diplodocus", "Groupe": "Saurischia", "Diet": "Herbivore", "Période": "Jurassic"}, {"Nom": "Stegosaurus", "Groupe": "Ornithischia", "Diet": "Herbivore", "Période": "Jurassic"}, {"Nom": "Tyrannosaurus", "Groupe": "Saurischia", "Régime": "Carnivore", "Période": "Crétacé"}]

Littéralement, tout ce que je veux faire est de mettre cela dans un pour apparaître sur une page Web.

Mon code actuel:

 function getJson(){$.get(MY URL, function(data) {
            // String
            //console.dir(data);

            // Parse JSON
            var obj = JSON.parse(data);

            // JSON object
            //console.dir(obj);
            $('#myList').html("<li>"+obj[0].period+"</li><li>"+obj[2].period+"</li>");
            //$('#myList').html("<li>obj[2].period</li>");
        });

    }

Ceci imprime avec succès la liste avec Triassique puis Jurrasic.

Je préférerais faire cela dans jQuery mais JavaScript va bien.

merci.

Answer 1

Vous n'êtes pas itération via la liste, imprimez simplement l'élément de 0-e et 2e dans le tableau.Essayez:

function getJson(){$.get(MY URL, function(data) {
        // String
        //console.dir(data);

        // Parse JSON
        var obj = JSON.parse(data);

        // JSON object
        //console.dir(obj);
        var inner = '';
        for(i=0; i < obj.length; i++) {
             inner += "<li>"+obj[i].period+"</li>";
        }
        $('#myList').html(inner);
    });

}

Je suis sûr qu'il y a un moyen plus propre en utilisant jQuery mais qui devrait fonctionner

Answer 2

Si vous souhaitez utiliser la syntaxe JQuery, procédez comme suit:

var listElement = '';

$.each(obj, function(index, value) {
    listElement += '<li>' + data[obj].period + '</li>';
})

$('#myList').html(listElement);