jquery_ajax_get

Mengambil data dari rest api menggunakan jquery ajax get dan menampilkannya berupa list.

by trisna dev

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jquery basic 1</title>
</head>

<body>
    <div id="loading"></div>
    <div id="tampil_data">
    </div>
</body>

</html>

JavaScript

$(document).ready(function () {
            $('#loading').append(`<p id="tulisan">Tunggu, sedang mengambil data...</p>`);
            $.get("https://jsonplaceholder.typicode.com/posts", function (data) {
                var html = `
                            <ol>
                `;

                $.each(data, function (key, value) {
                    html += `
                    <li>${value.title}</li>
                    `;
                });

                html += `</ol>`;
                $('#tampil_data').html(html);
            })
                .fail(function () {
                    alert('Terjadi kesalahan saat mengambil data !');
                })
                .always(function () {
                    // setTimeout(function(){  // buka komen pada codingan setTimeout untuk melihat loading text nya
                        $('#tulisan').remove();
                    // },3000);
                });
        });