¿Cómo analizar una lista Json como esta y mostrar sus elementos en HTML?

Obtuve un objeto Json utilizando el método getjson () de jQuery de esa manera:

<script>

$(document).ready(function(){

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

});

</script>

Los datos son una lista de matrices, y su formato es así:

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

Soy nuevo en JavaScript y no sé cómo analizarlo y mostrarlo en la página html. ¿Podrían ayudarme con el código en la parte '// hacer algo'?

Respuestas a la pregunta(1)

Su respuesta a la pregunta