Insert multiple html with ajax

Question

I have the following code in jquery:

musicas: function(){
    $.ajax({
        url: 'assets/includes/oloco.php',
        type: 'GET',
        dataType: 'json',
        beforeSend: function(){
            efeito.inicio();
        },
        success: function(data){
            $('.texto').html(data[0].musica);
            efeito.fim();
        }
    }),
    setTimeout(function(){
        player.musicas();
    }, 15000);
}

And in html as seen I have:

 <div class="text"></div>

However, my current ajax only changes the text of div, I would like to add 5 Divs changing the date[]! The oloco.php request is in json and has exactly 5 values as you can see below:

[
{
    "musica": "Luan Santana  Acordando o Pr\u00e9dio - Make U Sweat Remix (Lyric Video)"
},
{
    "musica": "Kygo ft. Parson James - Stole the show (Lyrics video)"
},
{
    "musica": "Justin Bieber Ft Daddy Yankee y Luis Fonsi - Pasito a Pasito Suave Suavecito (Letras)"
},
{
    "musica": "Jhef - Vida M\u00edtica (Official V\u00eddeo)"
},
{
    "musica": "Jhef - Pode ser n\u00f3s dois (Official Video)"
}
]

How can I insert multiple Ivs with different values and in order?

Answer 1

Just iterate on the result of the AJAX request and use the function append jQuery to insert the element into the DOM. It should look like this:

musicas: function(){
    $.ajax({
        url: 'assets/includes/oloco.php',
        type: 'GET',
        dataType: 'json',
        beforeSend: function(){
            efeito.inicio();
        },
        success: function(data){

            // Exclui possíveis músicas anteriores:
            $('.texto').html("");

            // Itera sobre todos os elementos de data:
            $(data).each(i => {
                // Cria um novo elemento p:
                let element = $("<p>");
                // Define o conteúdo de p:
                element.html(data[i].musica);
                // Adiciona o novo elemento ao DOM:
                $('.texto').append(element);
            });

            efeito.fim();
        }
    }),
    setTimeout(function(){
        player.musicas();
    }, 15000);
}