Sabtu, 19 September 2015

PHP: Passing Data Array/Object PHP ke Javascript Function

Ada kalanya kita perlu untuk mempassing data dengan tipe object dari script PHP ke Javascipt function. Misalkan kita ingin menampilkan informasi mahasiswa dengan menggunakan modal. Modal tersebut akan muncul ketika kita memanggil fungsi javascript dengan mempassing object data mahasiswa. Data mahasiswa ini misalkan kita dapatkan dari basis data. Triknya sangat simple untuk melakukan ini.
  1. Pertama kita harus mengkonversi tipe data object menjadi associative array.
  2. Setelah jadi associative array, kita encode dengan menggunakan fungsi json_encode dengan demikian kita bisa menggunakan JSON.parse() untuk men-decode data yang kita passing.
  3. Menggunakan function htmlspecialchars($data_json_encode, ENT_QUOTES), untuk melakukan escape string quotes dari hasil json_encode(). 
  4. Setelah itu, kita bisa menggunakan JSON.parse() pada fungsi javascript kita.

<?php
$arr = array(
    'nama' => 'Yanto',
    'umur' => 23,
    'alamat' => 'Jakarta'
);
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Foo</title>
    </head>
    <body>
        Cek:
        <?php echo json_encode($arr); ?>
        <br> 
        <a href="#" 
           onClick="foo('<?php echo htmlspecialchars(json_encode($arr), ENT_QUOTES); ?>')">
            Klik Me!
        </a>
    </body>
    <script type="text/javascript">
        function foo(data) {
            json = JSON.parse(data);
            console.log("Nama:" + json.nama);
            console.log("Umur:" + json.umur);
            console.log("Alamat:" + json.alamat);
        }
    </script>
</html>

Selamat mencoba.

Tidak ada komentar:

Posting Komentar