Menampilkan JSON ke HTML Table dinamis

Mau menampilkan isi json ke html dengan inputan/pencarian dinamis ini bentuk jsonnya yang ada di link http://localhost/siswa

 [{"id_biaya":"9","nis2":"21516034","name":"Azri ","amount":"10000"},{"id_biaya":"10","nis2":"21516034","name":"Azri ","amount":"25000"},{"id_biaya":"11","nis2":"21516035","name":"Amir ","amount":"25000""}]

berikut javascript untuk menampilkannya

   $("#cekid").click(function(){


            $.ajax({
                type:"GET",
                url:"http://localhost/siswa",
                data:{nis : $("#nissiswa").val()},
                dataType: "json",

                beforeSend: function(e) {
                    if(e && e.overrideMimeType) {
                        e.overrideMimeType("application/json;charset=UTF-8");
                    }
                },
                success:function(data){
                    var tr;
                    var i=data.length;

                    $.each(data, function(k, v) {
                      tr = $("<tr></tr>");
                      tr.append("<td>" + v.name + "</td>");
                      tr.append("<td>" + v.amount + "</td>");

                      $("#listbiaya").append(tr);
                    });

                },
                 error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.responseText);
                }
            });



        });

ini file form dan table htmlnya

 <input type="text" id="nis">
<table id="listbiaya"></table>

json berhasil tampil tapi hanya array pertama saja dan ketika cari lagi (tanpa refresh page) data yang lama masih muncul dan data baru jadi row selanjutnya

cara melakukan looping dan dinagaimana ya?

avatar adund
@adund

1 Kontribusi 0 Poin

Diperbarui 6 tahun yang lalu

1 Jawaban:

di coba gan...

saya ga tau itu udah berbentuk objek apa belum yang agan kasih... jadi saya konvert dulu ke object ($.parseJSON())


data = $.parseJSON(data);
for(var i = 0; i < data.length; i++){
	$('#listbiaya').append(
		'<tr>'+
		'	<td>' + data[i].name + '</td>'+
		'	<td>' + data[i].amount + '</td>'+
		'</tr>'
	);
}

avatar sukmaw
@sukmaw

340 Kontribusi 75 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban