Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Menampilkan response json dengan ajax berdasarkan relasi table db pada laravel 5.4.
Selamat berakhir pekan manteman. Saya mempunyai relasi table berikut :
Loket hasMany Users User belongsTo Loket Loket hasMany Saldos Saldo belongsTo Loket User hasMany Payments Payment belongsTo User
Selanjutnya saya ingin menampilkan data Loket->User->Payment, dan Loket->Saldo dalam satu Request menggunakan Ajax dengan response->json untuk di parsing ke View. Sejauh ini saya menulis di Controller seperti ini :
public function laporan(){
$laporan = Loket::with('users', 'saldos')->where('id', Auth::user()->loket_id)->get();
return response()->json($laporan);
}
Ajax nya begini :
<script type="text/javascript">
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(document).ready(function(){
$(".loadlaporan").click(function(){
$.ajax({
type: 'GET',
url: "laporan",
dataType: 'json',
beforeSend: function(){
$("#load-laporan").show();
},
success: function(response) {
console.log(response);
},
complete: function(response){
$("#load-laporan").hide();
}
});
});
});
</script>
Data console.log(respones)
[
{
"id": 15,
"nama_loket": "PPOB GIMMED",
"no_rekening": "400801017981536",
"bank": "BRI",
"kabupaten": "Bandung",
"kecamatan": "Bandung barat",
"alamat_loket": "Jl. Raya Pucang Km3 RT05 / RW022, Parung Sari",
"nama_pemilik": "Supriono",
"gender": "Laki-laki",
"identitas": "3207201505920004",
"no_hp": "085227101900",
"alamat_ktp": "Dusun Kawarasan RT14/RW06, Desa Sindangwangi, Kecamatan Padaherang, Kabupaten Pangandaran",
"set_print": null,
"agen_id": 0,
"created_at": "2019-11-18 01:28:25",
"updated_at": "2019-11-21 21:52:51",
"users": [
{
"id": 3,
"name": "Supriono",
"user_id": "salam015",
"email": "supriono46@yahoo.co.id",
"loket_id": 15,
"role": "0",
"created_at": "2019-11-18 01:28:53",
"updated_at": "2019-11-18 01:28:53"
}
],
"saldos": [
{
"id": 1,
"top_up": 1000000,
"loket_id": 15,
"topup_by": "ujang",
"created_at": "2019-11-18 03:00:00",
"updated_at": null
},
{
"id": 2,
"top_up": 1500000,
"loket_id": 15,
"topup_by": "ujang",
"created_at": "2019-11-18 03:00:00",
"updated_at": null
}
]
}
]
Kendala saya : 1. Pada Controller ada satu query yang kurang yaitu saya ingin menampilkan User->Payment agar bisa diterima dalam satu response ini. 2. Pada proses ajax response success saya ingin menampilkan data tsb, Jika requestnya tidak menggunakan Ajax mungkin bisa di foreach seperti biasa di view. Disini pada respon success saya ingin lakukan foreach untk data Loket->Users->Payment->idpel dan Loket->Saldo->top_up untuk di parsing ke dalam view table html. Implementasinya bagaimana yah? mohon maaf jika muter muter pertanyaannya, semoga dapat dipahami :)
2 Jawaban:
Update : Kendala No 1 sudah ok
<pre> public function laporan(){ $laporan = Loket::with('users.payments', 'saldos')->where('id', Auth::user()->loket_id)->get(); return response()->json($laporan); } </pre>
Response nya seperti ini :
<pre> [ { "id": 15, "nama_loket": "PPOB GIMMED", "no_rekening": "400801017981536", "bank": "BRI", "kabupaten": "Bandung", "kecamatan": "Bandung barat", "alamat_loket": "Jl. Raya Pucang Km3 RT05 / RW022, Parung Sari", "nama_pemilik": "Supriono", "gender": "Laki-laki", "identitas": "3207201505920004", "no_hp": "085227101900", "alamat_ktp": "Dusun Kawarasan RT14/RW06, Desa Sindangwangi, Kecamatan Padaherang, Kabupaten Pangandaran", "set_print": null, "agen_id": 0, "created_at": "2019-11-18 01:28:25", "updated_at": "2019-11-21 21:52:51", "users": [ { "id": 3, "name": "Supriono", "user_id": "salam015", "email": "supriono46@yahoo.co.id", "loket_id": 15, "role": "0", "created_at": "2019-11-18 01:28:53", "updated_at": "2019-11-18 01:28:53", "payments": [ { "id": 9, "user_id": "3", "produk": "Postpaid", "date_time": "20191105005009", "trxID": "1572889809444", "idno": "211001828100", "rc": "00", "namaPelanggan": "UDIN", "tarif": " S1", "daya": "1300", "tglTransaksi": "05/11/2019", "tglBayar": "05/11/2019 00:50:06", "blth": "MEI16", "meterAwal": "00000000", "meterAkhir": "00000000", "rpTag": "000000300000", "rpBK": "000000010000", "admBank": "2000", "jmlTagihan": "312000", "reffNo": "0213170Z83E7D162FA13580B178CF459", "created_at": "2019-11-21 17:42:47", "updated_at": "2019-11-21 17:42:47" }, { "id": 10, "user_id": "3", "produk": "Postpaid", "date_time": "20191105005009", "trxID": "1572889809444", "idno": "211001828100", "rc": "00", "namaPelanggan": "UDIN", "tarif": " S1", "daya": "1300", "tglTransaksi": "05/11/2019", "tglBayar": "05/11/2019 00:50:06", "blth": "JUN16", "meterAwal": "00000000", "meterAkhir": "00000000", "rpTag": "000000300000", "rpBK": "000000010000", "admBank": "2000", "jmlTagihan": "312000", "reffNo": "0213170Z83E7D162FA13580B178CF459", "created_at": "2019-11-21 17:42:47", "updated_at": "2019-11-21 17:42:47" }, { "id": 11, "user_id": "3", "produk": "Postpaid", "date_time": "20191105005009", "trxID": "1572889809444", "idno": "211001828100", "rc": "00", "namaPelanggan": "UDIN", "tarif": " S1", "daya": "1300", "tglTransaksi": "05/11/2019", "tglBayar": "05/11/2019 00:50:06", "blth": "MEI16", "meterAwal": "00000000", "meterAkhir": "00000000", "rpTag": "000000300000", "rpBK": "000000010000", "admBank": "2000", "jmlTagihan": "312000", "reffNo": "0213170Z83E7D162FA13580B178CF459", "created_at": "2019-11-21 17:43:42", "updated_at": "2019-11-21 17:43:42" }, { "id": 12, "user_id": "3", "produk": "Postpaid", "date_time": "20191105005009", "trxID": "1572889809444", "idno": "211001828100", "rc": "00", "namaPelanggan": "UDIN", "tarif": " S1", "daya": "1300", "tglTransaksi": "05/11/2019", "tglBayar": "05/11/2019 00:50:06", "blth": "JUN16", "meterAwal": "00000000", "meterAkhir": "00000000", "rpTag": "000000300000", "rpBK": "000000010000", "admBank": "2000", "jmlTagihan": "312000", "reffNo": "0213170Z83E7D162FA13580B178CF459", "created_at": "2019-11-21 17:43:42", "updated_at": "2019-11-21 17:43:42" }, { "id": 13, "user_id": "3", "produk": "Postpaid", "date_time": "20191105005009", "trxID": "1572889809444", "idno": "211001828100", "rc": "00", "namaPelanggan": "UDIN", "tarif": " S1", "daya": "1300", "tglTransaksi": "05/11/2019", "tglBayar": "05/11/2019 00:50:06", "blth": "MEI16", "meterAwal": "00000000", "meterAkhir": "00000000", "rpTag": "000000300000", "rpBK": "000000010000", "admBank": "2000", "jmlTagihan": "312000", "reffNo": "0213170Z83E7D162FA13580B178CF459", "created_at": "2019-11-21 17:44:17", "updated_at": "2019-11-21 17:44:17" }, { "id": 14, "user_id": "3", "produk": "Postpaid", "date_time": "20191105005009", "trxID": "1572889809444", "idno": "211001828100", "rc": "00", "namaPelanggan": "UDIN", "tarif": " S1", "daya": "1300", "tglTransaksi": "05/11/2019", "tglBayar": "05/11/2019 00:50:06", "blth": "JUN16", "meterAwal": "00000000", "meterAkhir": "00000000", "rpTag": "000000300000", "rpBK": "000000010000", "admBank": "2000", "jmlTagihan": "312000", "reffNo": "0213170Z83E7D162FA13580B178CF459", "created_at": "2019-11-21 17:44:17", "updated_at": "2019-11-21 17:44:17" }, { "id": 15, "user_id": "3", "produk": "Postpaid", "date_time": "20191105005009", "trxID": "1572889809444", "idno": "211001828100", "rc": "00", "namaPelanggan": "UDIN", "tarif": " S1", "daya": "1300", "tglTransaksi": "05/11/2019", "tglBayar": "05/11/2019 00:50:06", "blth": "MEI16", "meterAwal": "00000000", "meterAkhir": "00000000", "rpTag": "000000300000", "rpBK": "000000010000", "admBank": "2500", "jmlTagihan": "312500", "reffNo": "0213170Z83E7D162FA13580B178CF459", "created_at": "2019-11-21 17:44:17", "updated_at": "2019-11-21 17:44:17" }, { "id": 16, "user_id": "3", "produk": "Postpaid", "date_time": "20191105005009", "trxID": "1572889809444", "idno": "211001828100", "rc": "00", "namaPelanggan": "UDIN", "tarif": " S1", "daya": "1300", "tglTransaksi": "05/11/2019", "tglBayar": "05/11/2019 00:50:06", "blth": "JUN16", "meterAwal": "00000000", "meterAkhir": "00000000", "rpTag": "000000300000", "rpBK": "000000010000", "admBank": "2500", "jmlTagihan": "312500", "reffNo": "0213170Z83E7D162FA13580B178CF459", "created_at": "2019-11-21 17:44:17", "updated_at": "2019-11-21 17:44:17" } ] } ], "saldos": [ { "id": 1, "top_up": 1000000, "loket_id": 15, "topup_by": "ujang", "created_at": "2019-11-18 03:00:00", "updated_at": null }, { "id": 2, "top_up": 1500000, "loket_id": 15, "topup_by": "ujang", "created_at": "2019-11-18 03:00:00", "updated_at": null } ] } ] </pre>
Selanjutanya tinggal mengolah data tsb di response successnya masih bingung.
kalau di console.log(response) semua sudah keluar, berarti sudah aman. Menampilkannya bisa loop javascript di hasil ajaxnya mau forech atau for biasa boleh nanti pakai response["kolom"]["kolom2"] dst. tergantung bentuk responsenya
masalah menampilkannya kalau kamu pakai javascript biasa, gabungkan saja di satu string, misalnya (di dalam loopnya)
total += <div> response["kolom"]["kolom2"] </div>
terakhir tampilkan variable ini dengan <a href='https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML'>metode insertAdjacent di HTML</a> untuk menyambungkannya ke salah satu tag html
