Menampilkan value pada input HTML dari Request jSON

Misalnya saya ingin ketika menambah data, value pada input invoice html modal menampilkan nilai default value yang dikirim/direquest dari javascript seperti berikut 

Menampilkan value pada input HTML dari Request jSON

Secara sederhana ketika ingin menampilkan value pada input hmtl Anda bisa menggunakan fungsi seperti berikut

document.getElementById("id_input").value = " value "

Tapi dalam kondisi tertentu atau pada kasus yang berbeda cara diatas akan membuat javascript justru tidak berjalan atau datanya tidak tampil,  terutama jika dalam contoh kasus ini value yang diminta merupakan array data json yang berasal dari request get AXIOS yang kemudian didefinisikan didalam res data seperti berikut


<script>
axios({
            method: 'get',
            url: '{{ url('api/admin/get-details') }}',
            headers: {
                Authorization: `Bearer ${getItems('token')}`,
                Accept: 'application/json',
            },
        }).then((res) => {
            var details = res.data.details;

           //data diparsing dibagian ini sehingga diakses dalam bentuk id baik itu dalam tampilam html atau  input type tertentu

        }).catch((err) => {
            handleErrorResponse(err.response);
        });

</script>


Menampilkan value pada input HTML dari Request jSON

Sehingga untuk memparsing atau menampilkan hasil request get json, Anda bisa mendefinisikan data didalam res seperti berikut :

$('input[name=input_name]').val(res_data_array.data_yang_direquest);

atau jika anda ingin menampilkan hasil request tersebut didalam id html, Anda bisa juga menulisnya seperti berikut :


$('#nama-id').html(`${res_data_array.data_yang_direquest}`);

sehingga secara keseluruhan kode ditulis seperti berikut 


<script>
axios({
            method: 'get',
            url: '{{ url('api/admin/get-details') }}',
            headers: {
                Authorization: `Bearer ${getItems('token')}`,
                Accept: 'application/json',
            },
        }).then((res) => {
            var details = res.data.details;

           $('input[name=input_name]').val(details.nama_data_yang_direquest);

        }).catch((err) => {
            handleErrorResponse(err.response);
        });

</script>

Jadi kurang lebih seperti itu tentang bagaimana Menampilkan value pada input HTML dari Request jSON

Baca juga :


0 Response to "Menampilkan value pada input HTML dari Request jSON"

Post a Comment

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin