Thursday, February 20, 2014

menampilkan data json atau data array menggunakan combo di javascript

Diasumsikan sudah memiliki data json yang dipanggil menggunakan url, disini saya akan memanggil data json md_hari di alamat :

http://127.0.0.1/aplikasi_presensi/index.php/master_data/c_md_data_pegawai/combo_md_organisasi

data yang dipanggil menggunakan url diatas adalah seperti ini :

[{"kd_hari":"001","nm_hari":"Senin","keterangan":"\r"},{"kd_hari":"002","nm_hari":"Selasa","keterangan":null},{"kd_hari":"003","nm_hari":"Rabu","keterangan":null},{"kd_hari":"004","nm_hari":"Kamis","keterangan":null},{"kd_hari":"005","nm_hari":"Jum'at","keterangan":null},{"kd_hari":"006","nm_hari":"Sabtu","keterangan":null},{"kd_hari":"007","nm_hari":"Minggu","keterangan":null}]

permasalahan selanjutnya adalah bagaimana kita memanggil atau mengolah data tersebut dan ditampilkan menggunakan html seperti select option yang berbentuk combo.

Pertama saya menyiapkan file javascript yang berisi script ready function. fungsi tersebut akan dipanggil saat halaman web di load.

$(document).ready(function(){

//script 
});

Setelah itu membuat fungsi untuk memanggil JSON didalam ready(function(){ })

$.getJSON("http://127.0.0.1/aplikasi_presensi/index.php/master_data/c_md_jam_kerja/combo_md_hari", function(result){
//script
});

Setelah dipanggil selanjutnya memikirkan bagaimana agar data tersebut dapat tampil di html menggunakan combo. Sebelumnya saya siapkan file html yang didalamnya berisi script html untuk menampilkan combo.

<select name="kd_hari" id="kd_hari"><select>

Setelah html untuk combo sudah disiapkan kembali ke file javascript dan sekarang mulai poses penempatan data agar dapat diakses melalui combo html diatas. Script ini diisikan didalam function(result){ }

var sel = document.getElementById('kd_hari');
$.each(result, function(i, field){
var opt = document.createElement('option');
opt.innerHTML = result[i].nm_hari;
opt.value = result[i].kd_hari;
sel.appendChild(opt);
});

setelah selesai kembali ke file html dan panggil javascript menggunakan :
<script type="text/javascript" src="js_md_jam_kerja.js"></script>

berikut secript lengkap untuk file js :

//menampilkan combo hari
$.getJSON("http://127.0.0.1/aplikasi_presensi/index.php/master_data/c_md_jam_kerja/combo_md_hari", function(result){
var sel = document.getElementById('kd_hari');
$.each(result, function(i, field){
var opt = document.createElement('option');
opt.innerHTML = result[i].nm_hari;
opt.value = result[i].kd_hari;
sel.appendChild(opt);
});
});

No comments:

Post a Comment