Jagowebdev

JSON Pada Javascript – Panduan Lengkap

Pada kesempatan sebelumnya telah kita bahas lengkap mengenai apa itu JSON dan JSON Pada PHP. pada kesempatan kali ini kita akan membahas imlementasi JSON Pada Javascript.

Daftar Isi

  1. Javascript Method Terkait JSON
    1. JSON.parse()
    2. JSON.stringify()
  2. JSON dan AJAX
  3. JSON dan AJAX Pada Domain Yang Sama
    1. JSON Dari Plain Teks
    2. JSON Dari Database – Bentuk Dinamis
    3. JSON Dari Databse – Bentuk Statis
  4. Kesimpulan

I. Javascript Method Terkait JSON

Pada Javascript, terdapat dua method terkait JSON yaitu:

  1. JSON.parse() untuk mengubah string JSON menjadi javascript object.
  2. JSON.stringify() untuk mengubah javascript object menjadi string JSON.

Kedua method ini sudah disupport oleh hampir semua browser termasuk browser versi lama. Adapun list browser yang telah mendukung adalah sebagai berikut:

  • Microsoft Internet Explorer: mulai versi 8.0
  • Microsoft Edge
  • Firefox, mulai versi 3.5
  • Chrome, mulai versi 4
  • Safari, mulai versi 4
  • Opera mulai versi 11,5
  • Berbagai mobile browser

List lengkapnya dapat dilihat di:  https://caniuse.com/#feat=json

1. JSON.parse()

Method ini digunakan untuk memparse (parse = mengurai) string JSON  dan mengubah nya menjadi javascript object, hasilnya bisa berupa objek dengan tipe data objek maupun tipe data array  (dalam javascript tipe data array juga berbentuk objek – misal: var arr = new Array; )

1.a. Format Penulisan

Format penulisan method ini adalah sebagai berikut:

JSON.parse(text[, reviver]);

Pada method diatas, argumen text harus berupa JSON string, contoh:

var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}';
obj = JSON.parse(json_data);

// Objek hanya bisa di buka melalui console
console.log(obj);
console.log(obj.display_name);

Jika script tersebut kita jalankan, maka hasil yang kita peroleh adalah sebagai berikut:

Contoh Penggunaan Fungsi JSON.parse Pada Javascript

Contoh Penggunaan Fungsi JSON.parse Pada Javascript

Selain menggunakan method bawaan javascript, kita dapat melakukan parsing data JSON dengan library JQuery yaitu menggunakan method $.parseJSON() namun method tersebut sudah deprecated dan tidak relevan karena saat ini semua browser sudah mendukung method JSON.parse()

1.b. Menggunakan reviver

Reviver digunakan untuk memanipulasi value  dari json string sebelum diubah menjadi objek. ketika reviver dijalankan, setiap item dari json akan di evaluasi di dalam reviver.

Reviever ini berupa fungsi yang memiliki dua argumen. Argumen pertama adalah key sedangkan yang kedua adalah value. seperti layaknya fungsi, reviver ini dapat memberikan nilai kembalian (return)

Jika reviver tidak memberikan nilai kembalian (return) atau memberikan nilai kembalian namun dengan nilai undefined, maka properti akan dihapus dari objek.

Contoh penggunaan reviver:

<script>
  var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}';
      obj = JSON.parse(json_data, (key,value) => {
                      
        // Memanipulasi property website
        if (key == 'website') {
          value = 'http://' + value.toLowerCase();
        }
        
        // Memanipulasi display_name
        if (key == 'display_name') {
          value = value.toUpperCase();
        }
        
        return value;
    }
  );
  console.log(obj); 
  // Hasil: {user: "agusph", display_name: "AGUS PRAWOTO HADI", website: "https://jagowebdev.com"}
</script>

Reviver juga dapat berupa fungsi yang berdiri sendiri, contoh:

<script>
var json_data = '["agusph", "Agus Prawoto Hadi", "Jagowebdev.com"]';
obj = JSON.parse(json_data, reviver);
    
function reviver(key,value) {
    if (key == 1) {
      value = value.toUpperCase();
    }
    return value;
};

console.log(obj);
// Hasil: ["agusph", "AGUS PRAWOTO HADI", "Jagowebdev.com"]
</script>

2. JSON.stringify()

Method JSON.stringify() digunakan untuk mengubah objek javascript menjadi string JSON. Objek tersebut dapat berupa array maupun objek.

Fungsi ini umumnya digunakan pada AJAX, yaitu ketika data akan dikiriman ke halaman lain untuk diolah lebih lanjut. Selain itu, juga digunakan untuk memudahkan menampilkan data objek seperti menggunakan alert() atau menyimpan data objek ke elemen html.

1.a. Format Penulisan

Format penulisan method ini adalah sebagai berikut:

JSON.stringify(value [, replacer[, space]]);

Argumen value wajib diisi sedangkan yang lain bersifat opsional. Contoh penggunaan method JSON.stringify() adalah sebagai berikut:

<html>
  <head>
  </head>
  <body>
    <form action="" method="post" id="form-input">
      <label>Nama</label><input type="text" name="nama" value="Agus Prawoto Hadi"/>
      <label>Email</label><input type="text" name="email" value="prawoto.hadi@gmail.com"/>
      <label>Website</label><input type="text" name="website" value="Jagowebdev.com"/>
      <input class="offset button" type="submit" name="submit" value="Submit"/>
    </form>

    <script type="text/javascript">
    $('#form-input').submit(function(e){
      e.preventDefault();
      data = {};
      $('input[name!="submit"]').each(function(i, elm) {
        data[$(elm).attr('name')] = elm.value;
      })
      
      data_json = JSON.stringify(data);
      alert(data_json);
      // Send data_json via AJAX...
    })
    </script>
  </body>
</html>

Script diatas akan menghasilkan form dengan isian nama, email, dan website, kemudian jika form tersebut kita submit, maka akan muncul alert yang berisi data isian form tersebut, misal seperti gambar dibawah ini:

Contoh Penggunaan Method JSON.stringify()

Contoh Penggunaan Method JSON.stringify()

Lihat demonya disini.

1.b. Menggunakan Replacer

Replacer ini berfungsi sama seperti reviver pada method  JSON.parse() yaitu memanipulasi data awal sebelum string JSON dihasilkan. Replacer dapat berupa fungsi maupun array.

Berikut ini contoh replacer berupa fungsi:

Melanjutkan contoh sebelumnya, script berikut ini akan merubah inputan nama menjadi huruf kapital semua.

<script type="text/javascript">
$('#form-input').submit(function(e){
  ...
  data_json = JSON.stringify(data, replacer);
  ...
})

function replacer(json_key, json_value) {
  if (json_key == 'nama') {
     json_value = json_value.toUpperCase();
  }
  return json_value;
}
</script>

Lihat demonya disini.

Jika replacer berupa array, maka json yang dihasilkan hanya memiliki properties sesui yang ada pada array tersebut.

Sebagai contoh: melanjutkan contoh sebelumnya, replacer berikut ini hanya mengambil properti yang memiliki nilai: nama dan email saja.

$('#form-input').submit(function(e){
  ...
  data_json = JSON.stringify(data, ['nama', 'email']);
  // data_json berisi {"nama":"Agus Prawoto Hadi","email":"prawoto.hadi@gmail.com"}
  ...
})

1.c. Menggunakan space

Argumen space digunakan untuk menghasilkan string JSON dengan format yang mudah dibaca. Tidak disarankan menggunakan argumen ini untuk JSON yang akan diproses lebih lanjut.

Argumen space dapat berisi spasi atau tab, berikut ini contoh argumen space dengan tab:

<script>
var obj = {};
obj.user = 'agusph';
obj.display_name = 'Agus Prawoto Hadi';
obj.website = 'Jagowebdev.com';

json = JSON.stringify(obj, '', '\t');
console.log(json);
</script>

Hasil:

{
	"user": "agusph",
	"display_name": "Agus Prawoto Hadi",
	"website": "Jagowebdev.com"
}

II. JSON dan AJAX

Pada javascript, semua yang berhubungan dengan JSON sebagian besarnya melibatkan ajax, karena biasanya string json disediakan oleh halaman lain baik pada domain yang sama maupun pada domain yang berbeda.

Note… pada domain berbeda, kita tidak bisa dengan mudah  mengambil data json, melainkan perlu trik tertentu. lebih jauh mengenai hal ini kita bahas pada artikel:  JSONP Dengan Javascript dan jQuery – Lintas Domain .

Untuk mendapatkan data JSON melalui ajax (pada domain yang sama), kita bisa menggunakan  objek bawaan javascript (native)  yaitu objek  XMLHttpRequest atau menggunakan library Javascript seperti jQuery.

Agar lebih mudah, pada  tutorial kali ini kita akan menggunakan library jQuery.

III. JSON dan AJAX Pada Domain Yang Sama

Pada domain yang sama, kita dapat dengan mudah mengambil data JSON, berikut ini contoh script mengambil data JSON yang bersumber dari  plain teks maupun dari data yang diambil dari database.

1. JSON Dari  Plain Teks – Dengan AJAX

JSON berbentuk plain teks sering kita jumpai pada file konfigurasi. Sebagai contoh misal didalam folder htdocs kita memiliki file config.php  dengan content sebagai berikut:

{
  "site" : 
  {
    "url" : "https://jagowebdev.com",
    "theme" : "clear",
    "path" : "public_html\\jwd"
  },
  "database" :
  {
    "db_host" : "localhost",
    "db_port" : 3306",
    "db_user" : "root",
    "db_pass" : "",
    "db_name" : "jwd"
  }
}

Perhatikan bahwa pada data diatas, yaitu bagian “path” saya mengescape backslash dari \ menjadi \\

Kenapa? karena backslash adalah karakter khusus sehingga jika ingin menggunakannya kita perlu menambahkan escape. Lihat kembali artikel sebelumnya.

Selanjutnya, misal untuk memparse data tersebut kita membuat file json-parse-plain-text.html  yang berisi script HTML dan javascript seperti berikut ini:

<html>
  <head>
    <title>Belajar JSON - JSON Dari Plain Text</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
    $.ajax({
      url : 'http://localhost/config.php',
      dataType : 'json',
      success: function (data) {
        console.log(data);
      },
      error: function (xhr, status, msg) {
        alert('Status: ' + status + "\n" + msg);
      }
    })
    </script>
  </body>
</html>

Ketika file diatas dijalankan, maka hasil yang kita peroleh adalah:

Parsing Data JSON Dengan Javascript - Plain Text

Parsing Data JSON Dengan Javascript – Plain Text

Note… perhatikan bahwa ketika kita mendefinisikan dataType dengan json, maka secara otomatis, JQuery akan melakukan parsing data JSON menjadi objek javascript, sehingga kita tidak perlu menjalankan method JSON.parse()

Dengan demikian, jika string JSON tidak valid, akan memunculkan pesan error, misal jika backslash tidak di escape, pesan error yang kita dapatkan adalah:

Error Ketika Parsing Data JSON

Error Ketika Parsing Data JSON

Error tersebut dikarenakan setelah backslash, parser mencari karakter khusus untuk di escape, namun tidak menemukannya, melainkan hanya menemukan karakter j yang bukan karakter khusus.

2. JSON Dari Database – Dengan AJAX

Praktik lain yang paling sering dilakukan adalah  membuat JSON dari database,  seperti untuk  pagination, multi level drop down, dll.

Pada contoh kali ini kita akan membuat drop down dinamis dari data database yaitu sub kategori yang berubah-ubah sesuai dengan kategori yang dipilih (misal pada form input produk).

Sebagai  contoh kita memiliki tabel product_category  yang berada di database store dengan data sebagai berikut:

category_id category_name parent
1 Books 0
2 Music & Instruments 1
3 Hobbies 1
4 Computer & Internet 1
5 Programming 1
6 Home & Garden 0
7 Lighting 6
8 Tools 6
9 Bath 6
10 Computer & Mobile 0
11 Software 10
12 Printers & Scanners 10
13 Laptops 10
14 Modems 10
15 Antivirus 11
16 Office 11
17 Operating System 11
18 Image & Video 11
19 Desktop Programming 5
20 Web Programming 5
21 Mobile Programming 5

Selanjutnya kita buat  file category_list.php yang menghasilkan data JSON yang nantinya akan kita gunakan untuk membuat sub kategori dinamis, adapun script PHP yang kita gunakan adalah sebagai berikut:

<?php
if (!@$_GET['parent'])
  die;

$conn = mysqli_connect('localhost', 'root', '', 'store');
$query = mysqli_query($conn, 'SELECT category_id, category_name FROM product_category WHERE parent = ' . $_GET['parent']);
while ($row=mysqli_fetch_array($query)) {
	$data[] = array('id' => $row['category_id'], 'name' => $row['category_name']); 
}

echo json_encode($data);

Untuk mengakses script tersebut, url yang kita panggil adalah sebagai berikut:  https://jagowebdev.com/wp-content/demo/json-pada-javascript/category-list.php?parent=1

Hasil yang kita peroleh:

Data JSON Pada Halaman Category List

Data JSON Pada Halaman Category List

Note.. Data JSON diatas akan berubah ubah sesuai dengan nilai parent.

Selanjutnya kita buat file json-local-dynamic.php  yang berisi kode Script PHP dan HTML untuk membuat form dengan pilihan kategori  yang bersifat dinamis:

<form method="post" action="proses.php">
  <input type="text" name="nama_barang" value="<?=@$_POST['nama_barang'] ?: ''?>"/>
  <select name="kategori[]" class="kategori">
    <option value="">Pilih Kategori</option>
    <?php
      $query = mysqli_query($conn, 'SELECT category_id, category_name 
                                    FROM product_category 
                                    WHERE parent = 0'
                          );
                          
      while ($row=mysqli_fetch_array($query)) {
        echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';
      }
    ?>
  </select>
  <input class="button" type="submit" name="submit" value="Submit"/>
</form>

Kode diatas sudah disederhanakan, sehingga berbeda dengan bentuk aslinya (versi demo dan download), yang penting  esensinya sama. Bentuk tampilan form nya adalah sebagai berikut:

Form Multi Level Drop Down

Form Multi Level Drop Down

Selanjutnya, kode javascript yang kita gunakan adalah:

$('#form-input').delegate('select.kategori', 'change', function(){
  var $this = $(this), 
      current_id =  $this.val()
      url = 'https://jagowebdev.com/wp-content/demo/json-pada-javascript/category-list.php?parent=' + current_id;
      
  $.ajax({
    url: url,
    dataType: 'json',
    success: function(obj)
    {
      var content = obj.data,
          new_option = '';
      
      for (k in content) {
        new_option += '<option value="' + content[k].category_id + '">' + content[k].category_name + '</option>';
      }
      
      $new_select = $this.clone().empty();
      $new_select.append(new_option).insertAfter($this);
    },
    error: function(xhr) {
      alert('AJAX Error...' + xhr.responseText);
    }
  });
});

Note: script diatas juga sudah disederhanakan, intinya sobat paham cara kerja JSON dengan ajax, untuk script lengkap bisa dilihat di bagian demo atau di download di bagian bawah artikel ini.

Untuk demonya bisa dilihat pada  halaman ini  atau pada bagian demo yang ada di bagian bawah artikel ini.

Cara kerja script diatas adalah…

ketika kita memilih kategori maupun sub kategori, maka sub kategori di bawahnya juga akan berubah ubah, ada yang hanya satu sub kategori, ada yang lebih dari satu.

3. JSON Dari Database – Statis

Pada contoh sebelumnya, ketika kategori maupun sub kategori berubah, aplikasi akan selalu merequest data JSON baru.

Pada kondisi tertentu, hal ini akan menyebabkan aplikasi menjadi lambat dan kurang responsif, untuk itu jika data tidak terlalu banyak, kita dapat membuatnya menjadi statis.

Contoh implementasinya bisa dilihat di  halaman ini atau pada bagian demo yang ada di bagian bawah artikel ini.

IV.  Kesimpulan

Untuk memparsing data JSON dengan Javascript kita gunakan method JSON.parse() method ini sudah didukung semua browser, sehingga tidak perlu menggunakan bantuan library apapun termasuk JQuery.

Sedangkan untuk membuat JSON string dari objek Javascript, kita gunakan method  JSON.stringify() method ini juga sudah didukung semua browser, sehinga tidak perlu bantuan library eksternal.

Jika data JSON berada di file/halaman berbeda, kita dengan mudah memanggilnya dengan AJAX, namun jika berada di domain berbeda, berbeda pula cara memanggilnya (tidak bisa dengan ajax – dibahas di sini).

Demikian pembahasan tentang json pada javascript part I, semoga bermanfaat.

Halaman demo dan file download:

LIVE DEMO

Untuk versi offline, telah kami sediakan file php, css, javascript, sql serta petunjuk penggunaannya. Untuk mendownloadnya, silakan klik tombol salah satu social media berikut  ini:

Referensi:

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun.

16 Feedback dari pembaca

  • Gan, bisa g kita mencari data tertentu dalam json menggunakan javascript? Selain dengan loop kalau bisa

    Reply

    • Coba ini mas:
      1. Ubah JSON menjadi objek
      2. Di loop setiap data pada obejek dan ambil category_name nya saja
      atau di PHP nya pas membuat JSON di tampilkan hanya category name nya saja mas…

      Reply

  • gan, tanya kalau data json di akses via ajax dan mau di parse ke dalam bentuk html, sebaiknya di parse pada javascript atau pada php saja?

    Reply

  • Siang Mas Agus
    kalau misalnya kita akan melakukan pencarian data dari json menggunkan “search box” gimana caranya mas,,
    misal nya menggunakan data sbb : http://dummy.restapiexample.com/api/v1/employees
    “status”: “success”,
    “data”: [
    {
    “id”: “1”,
    “employee_name”: “Tiger Nixon”,
    “employee_salary”: “320800”,
    “employee_age”: “61”,
    “profile_image”: “”
    },
    {
    “id”: “2”,
    “employee_name”: “Garrett Winters”,
    “employee_salary”: “170750”,
    “employee_age”: “63”,
    “profile_image”: “”
    },
    {
    “id”: “3”,
    “employee_name”: “Ashton Cox”,
    “employee_salary”: “86000”,
    “employee_age”: “66”,
    “profile_image”: “”
    },
    {
    “id”: “4”,
    “employee_name”: “Cedric Kelly”,
    “employee_salary”: “433060”,
    “employee_age”: “22”,
    “profile_image”: “”
    },

    yang digunakan untuk pencariannya adalah ID, setelah di klik maka muncullah data yang diinginkan
    Terima kasih

    Reply

    • Sama saja mas, di buat menjadi array dulu, kemudian datanya di loop satu persatu hingga ketemu ID yang diinginkan, misal:
      $array = json_decode($json_data, true);
      foreach ($array as $val) {
      if ($val[‘id’] == 1){
      // jalankan code…
      }
      }

      Reply

  • mohon pencerahan, bagaimana cara mengambil hasil query kedalam sebuah variabel?, berikut script saya :

    function tempsrv() {
    tempsrv = pool.query('SELECT temperature FROM tbtemp ORDER BY datetime DESC LIMIT 1', (error, results) => {
       if (error) {
         throw error
       }
    console.log(results.rows)
  })
}

    maksud saya hasil results.rows ini mau saya masukan kedalam variable agar bisa dipakai di function berikut :

    app.post('/', express.json(), (req, res)=>{
        const agent = new dfff.WebhookClient({
                request : req,
                response : res
        });

        function gettemp(agent){
           agent.add("Suhu ruang server saat ini adalah "+results.rows+" derajat celsius");
        }
        var intentMap = new Map();
        intentMap.set('gettemperature',gettemp)
        agent.handleRequest(intentMap);
});

    Saya mau nyoba akses database melalui dialogflow. Terima kasih.

    Reply

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Social

  1. Tutorial Grocery CRUD Lengkap
  2. Implementasi HMVC Pada Codeigniter 4
  3. Trik Coding Cepat dan Efisien Pada PHP
  4. PHP Admin Template Dashboard
  5. Prefix Tabel Pada Database, Perlukah?
  6. Same Origin Policy – Apa dan Bagaimana Mengatasinya?
  7. JSONP Dengan Javascript dan jQuery – Lintas Domain
  8. JSON Pada Javascript – Panduan Lengkap
  9. JSON Pada Dokumen HTML
  10. JSON Dari Database – PHP dan MySQL

Kategori