Como inserir um objeto json em uma lista não ordenada

Question

Eu tenho um objeto json que eu criei usando obj = JSON.analisar(de dados)."dados" foi recebido a partir de um servidor web.Eu sei que o objeto está correcto, porque eu posso imprimir de variáveis individuais dele em uma div ou a minha lista.

Este é que é o objeto json é criado a partir de:

[{"name":"Staurikosaurus","group":"Saurischia","diet":"Carnivore","period":"Triassic"},{"name":"Diplodocus","group":"Saurischia","diet":"Herbivore","period":"Jurassic"},{"name":"Stegosaurus","group":"Ornithischia","diet":"Herbivore","period":"Jurassic"},{"name":"Tyrannosaurus","group":"Saurischia","diet":"Carnivore","period":"Cretaceous"}]

Literalmente tudo que eu quero fazer é colocar isso em uma exibição em uma página da web.

Meu código:

 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>");
        });

    }

Isso imprime com êxito a lista com Triássico, em seguida, Jurrasic.

Eu prefiro fazer isso no Jquery, javascript, mas está bem.

Obrigado.

Answer 1

Você não iterar através de lista, basta imprimir o 0-ésimo e o 2º elemento na matriz.Tente:

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);
    });

}

Eu tenho certeza que há uma maneira mais limpa usando jQuery, mas que deve funcionar

Answer 2

Se você deseja usar a sintaxe jQuery, um processo semelhante a este:

var listElement = '';

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

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