DUN WebAPI sample

Parlimen



    <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: "http://www.azali.net/API/Parlimen",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            data: {},
            success: function (result) {
                $.each(result, function (i) {
                    $('#selPar').append($('<option></option>').val(result[i].KodPar).html(result[i].KodPar + ' - ' + result[i].NamaPar));
                });
                $('#selPar').change();
            },
            failure: function () {
                alert("Error");
            }
        });
            $('#selPar').change(function () {
            var selectedParliment = $("#selPar option:selected").val();
            $.ajax({
                type: "get",
                url: "http://www.azali.net/API/Parlimen/" + selectedParliment,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data: {},
                success: function (result) {
                    $('#tblDUN').empty();
                    $('#tblDUN').append('<thead><tr><th>Kod</th><th>Dewan undangan negeri</th></tr></thead>');
                    $('#tblDUN').append('<tbody>');
                    for (var x = 0; x < result.DUN.length; x++) {
                        $('#tblDUN').append('<tr><td>' + result.DUN[x].KodDUN + '</td><td>' + result.DUN[x].NamaDUN + '</td></tr>');
                    }
                    $('#tblDUN').append('</tbody>');
                },
                failure: function () {
                    alert("Error");
                }
            });
        });
    });
    </script>
    <h2>DUN</h2>
    <p>
        Parlimen <select id="selPar"></select>
    </p>
    <div class="container">
        <div class="row">
            <div class="col-xs-10 col-sm-8 col-md-6 col-lg-4">
                <table id="tblDUN" class="table well"></table>
            </div>
        </div>
    </div>