Bandar Web API sample

Contoh data di ambil dari
Sistem Data Dictionary Sektor Awam(SDDSA)

Negeri

Daerah

---

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function () {
        $.ajax({
            type: "get",
            url: "https://www.azali.net/API/Negeri",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            data: {},
            success: function (result) {
                $.each(result, function (i) {
                    $('#selNegeri').append($('<option></option>').val(result[i].KodNegeri).html(result[i].NamaNegeri));
                });
                $('#selNegeri').change();
            },
            failure: function () {
                alert("Error");
            }
        });
            $('#selNegeri').change(function () {
            var selectedNegeri = $("#selNegeri option:selected").val();
            $('#selDaerah').empty();
            $.ajax({
                type: "get",
                url: "https://www.azali.net/API/Negeri/" + selectedNegeri,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data: {},
                success: function (result) {
                    $('#selDaerah').empty();
                    for (var x = 0; x < result.Daerah.length; x++) {
                        $('#selDaerah').append($('<option></option>').val(result.Daerah[x].KodDaerah).html(result.Daerah[x].NamaDaerah));
                    }
                    $('#selDaerah').change();
                },
                failure: function () {
                    alert("Error");
                }
            });
        });
        $('#selDaerah').change(function () {
            var selectedDaerah = $("#selDaerah option:selected").val();
            $('#tblBandar').empty();
            $.ajax({
                type: "get",
                url: "https://www.azali.net/API/Daerah/" + selectedDaerah,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data: {},
                success: function (result) {
                    $('#tblBandar').empty();
                    $('#tblBandar').append('<thead><tr><th>Kod</th><th>Bandar</th></tr></thead>');
                    $('#tblBandar').append('<tbody>');
                    for (var x = 0; x < result.Bandar.length; x++) {
                        $('#tblBandar').append('<tr><td>' + result.Bandar[x].KodBandar + '</td><td>' + result.Bandar[x].NamaBandar + '</td></tr>');
                    }
                    $('#tblBandar').append('</tbody>');
                },
                failure: function () {
                    alert("Error");
                }
            });
        });
    });
    </script>
    <h2>Bandar</h2>
    <p>
        Negeri <select id="selNegeri"></select>
    </p>
    <p>
        Daerah <select id="selDaerah"></select>
    </p>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
                <table id="tblBandar" class="table well"></table>
            </div>
        </div>
    </div>

Back to Demo