Mengambil data json dengan javascript

Question

Pada kesempatan sebelumnya kita telah membahas secara lengkap apa itu JSON dan JSON pada PHP. pada kesempatan kali ini kita akan membahas implementasi JSON pada Javascript

Table of Contents Show

I. Metode Javascript Terkait dengan JSON
1. JSON. mengurai()
2. JSON. merangkai()
II. JSON dan AJAX
AKU AKU AKU. JSON dan AJAX Di Domain yang Sama
1. JSON Dari Teks Biasa – Dengan AJAX
2. JSON Dari Basis Data – Dengan AJAX
3. JSON Dari Basis Data – Statis
IV. Ã‚Â Kesimpulan
Berlangganan sekarang

Daftar isi

I. Metode Javascript Terkait dengan JSON

Dalam Javascript, ada dua metode yang terkait dengan JSON, yaitu

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);

5 untuk mengonversi string JSON menjadi objek javascript

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);

6 untuk mengonversi objek javascript menjadi string JSON

Kedua metode ini didukung oleh hampir semua browser, termasuk browser versi lama. Daftar browser yang didukung adalah sebagai berikut

Microsoft Internet Explorer. dimulai dengan versi 8. 0
Microsoft Edge
Firefox, dimulai dengan versi 3. 5
Chrome, dimulai dengan versi 4
Safari, dimulai dengan versi 4
Opera dari versi 11.5
Berbagai browser seluler

Daftar selengkapnya bisa dilihat di. A A

1. JSON. mengurai()

Metode ini digunakan untuk mengurai string JSON dan mengubahnya menjadi objek javascript, hasilnya bisa berupa objek dengan tipe data objek atau tipe data array (dalam javascript tipe data array juga merupakan objek - misalnya. var

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);

_7 )

1. a. Formasi Penulisan

Format penulisan metode ini adalah sebagai berikut

JSON.parse(text[, reviver]);

Dalam metode di atas, argumen teks harus berupa string JSON, misalnya

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 dapatkan adalah sebagai berikut

Contoh Penggunaan Fungsi JSON. mengurai Dalam Javascript

Selain menggunakan metode javascript bawaan, kita dapat mengurai data JSON dengan library JQuery, yaitu menggunakan metode

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);

8, namun metode tersebut sudah tidak digunakan lagi dan tidak relevan karena saat ini semua browser sudah mendukung metode

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);

5

1. b. Menggunakan penyegar

Reviver digunakan untuk memanipulasi nilai dari string json sebelum diubah menjadi objek. saat menghidupkan kembali dijalankan, setiap item dari json akan dievaluasi dalam menghidupkan kembali

Peninjau ini adalah fungsi yang memiliki dua argumen. Argumen pertama adalah kuncinya sedangkan yang kedua adalah nilainya. sebagaimana layaknya sebuah fungsi, penghidup ini dapat memberikan nilai pengembalian (return)

Jika revender tidak memberikan nilai pengembalian (return) atau memberikan nilai pengembalian tetapi dengan nilai yang tidak ditentukan, maka properti akan dihapus dari objek

Contoh penggunaan revender

<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 bisa menjadi fungsi yang berdiri sendiri, misalnya

<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. merangkai()

Metode

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);

_6 digunakan untuk mengonversi objek javascript menjadi string JSON. Objeknya bisa berupa array atau objek

Fungsi ini umumnya digunakan pada AJAX, yaitu saat data akan dikirim ke halaman lain untuk diproses lebih lanjut. Ã‚Â Selain itu, juga digunakan untuk memudahkan menampilkan data objek seperti menggunakan

<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>

1 atau menyimpan data objek ke elemen html

1. a. Formasi Penulisan

Format penulisan metode ini adalah sebagai berikut

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

Argumen

<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>

2 harus diisi sedangkan yang lainnya opsional. Contoh penggunaan metode

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);

_6 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="[email protected]"/>
      <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 nama, email, dan website, kemudian jika form kita submit maka akan muncul alert berisi data yang diisi form tersebut, contohnya seperti gambar dibawah ini

Contoh Penggunaan Metode JSON. merangkai()

Lihat demonya di sini

1. b. Menggunakan Pengganti

Replacer ini bekerja sama dengan reinver pada methodÃ‚Â

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);

5, yaitu memanipulasi data awal sebelum string JSON dihasilkan. Replacer dapat berupa fungsi atau array

Berikut adalah contoh pengganti dalam bentuk fungsi

Melanjutkan contoh sebelumnya, script berikut ini akan merubah input nama menjadi huruf besar 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 di sini

Jika penggantinya berupa array, maka json yang dihasilkan hanya memiliki properti yang ada di dalam array

Misalnya. melanjutkan contoh sebelumnya, pengganti berikut 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":"[email protected]"}
  ...
})

1. c. Menggunakan spasi

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

Argumen spasi dapat berisi spasi atau tab, berikut adalah contoh argumen spasi 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

Dalam javascript, semua yang berhubungan dengan JSON kebanyakan melibatkan ajax, karena biasanya string json disediakan oleh halaman lain baik di domain yang sama maupun di domain yang berbeda

Catatan.. pada domain yang berbeda, kami tidak dapat dengan mudah mengambil data json, tetapi kami membutuhkan trik tertentu. lebih lanjut tentang ini kita bahas di artikel. Ã‚Â JSONP Dengan Javascript dan jQuery Ã¢â‚¬â€œ Lintas Domain

Untuk mendapatkan data JSON melalui ajax (pada domain yang sama), kita bisa menggunakan objek javascript (native) yaitu objek

<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>

5 atau menggunakan library Javascript seperti jQuery .

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

AKU AKU AKU. JSON dan AJAX Di Domain yang Sama

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

1. JSON Dari Teks Biasa – Dengan AJAX

JSON dalam bentuk teks biasa banyak ditemukan pada file konfigurasi. Misal di folder htdocs kita punya file

<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>

6Ã‚Â dengan isi sebagai berikut

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);

0

Perhatikan bahwa pada data di atas, yaitu bagian "jalur", saya menghindari garis miring terbalik dari \ ke \\

Mengapa? . Lihat kembali artikel sebelumnya

Selanjutnya misalnya untuk mengurai data kita membuat file

<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>

7Ã‚Â yang berisi script HTML dan javascript sebagai berikut

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);

_1

Ketika file di atas dijalankan, hasil yang kita dapatkan adalah

Parsing Data JSON Dengan Javascript – Teks Biasa

Perhatikan.. perhatikan bahwa ketika kita mendefinisikan tipe data dengan json, maka JQuery akan secara otomatis mengurai data JSON menjadi objek javascript, jadi kita tidak perlu menjalankan metode

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);

5

Dengan demikian, jika string JSON tidak valid maka akan muncul pesan error, misalnya jika backslash tidak di-escape maka pesan error yang kita dapatkan adalah

Kesalahan Saat Mengurai Data JSON

Kesalahannya adalah karena setelah garis miring terbalik, parser mencari karakter khusus untuk diloloskan, tetapi tidak menemukannya, tetapi hanya menemukan karakter j yang bukan karakter khusus

2. JSON Dari Basis Data – Dengan AJAX

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

Pada contoh ini, kita akan membuat dynamic drop down dari data database, yaitu sub kategori yang berubah sesuai dengan kategori yang dipilih (misalnya pada form input produk)

Misalnya, kita memiliki tabel

<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>

9Ã‚Â yang ada di database

<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>

0 dengan data sebagai berikut

category_idcategory_nameparent1Books02Music & Instruments13Hobbies14Computer & Internet15Programming16Home & Garden07Lighting68Tools69Bath610Computer & Mobile011Software1012Printers & Scanners1013Laptops1014Modems1015Antivirus1116Office1117Operating System1118Image & Video1119Desktop Programming520Web Programming521Mobile Programming5

Selanjutnya kita membuat file

<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>

_1 yang menghasilkan data JSON yang nantinya akan kita gunakan untuk membuat sub kategori dinamis, adapun script PHP yang kita gunakan adalah sebagai berikut

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);

_2

Untuk mengakses script tersebut, url yang kita panggil adalah sebagai berikut. Ã‚Â https. //jagowebdev. com/wp-content/demo/json-on-javascript/category-list. php?induk=1

Hasil yang kita dapatkan

Data JSON di halaman Daftar Kategori

Catatan. Data JSON di atas akan berubah sesuai dengan nilai induknya

Selanjutnya kita buat file

<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Ã‚Â yang berisi kode script PHP dan HTML untuk membuat form dengan opsi kategori dinamisÃ‚Â

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);

_3

Kode diatas sudah disederhanakan jadi berbeda dengan bentuk aslinya (versi demo dan download), yang penting intinya sama. Tampilan formnya adalah sebagai berikut

Formulir Drop Down Multi Level

Selanjutnya kode javascript yang kita gunakan adalah

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);

_4

Catatan. Script diatas juga sudah disederhanakan, intinya untuk memahami cara kerja JSON dengan ajax, untuk script lengkapnya bisa anda lihat di bagian demo atau download di bagian bawah artikel ini

Untuk demonya bisa dilihat di halaman ini atau di bagian demo di bagian bawah artikel ini

Cara kerja script di atas adalah…

ketika kita memilih kategori atau sub kategori, maka sub kategori dibawahnya juga akan berubah, ada yang hanya memiliki satu sub kategori, ada juga yang memiliki lebih dari satu

3. JSON Dari Basis Data – Statis

Pada contoh sebelumnya, ketika kategori atau subkategori berubah, aplikasi akan selalu meminta data JSON yang baru

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

Contoh penerapannya bisa dilihat di halaman ini atau di bagian demo di bagian bawah artikel ini

IV. Ã‚Â Kesimpulan

Untuk mem-parse data JSON dengan Javascript, kita menggunakan metode

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);

5Ã‚Â Metode ini didukung oleh semua browser, sehingga tidak perlu menggunakan bantuan library apapun, termasuk JQuery.

Adapun untuk membuat string JSON dari objek Javascript, kami menggunakan metode _______0_______6, metode ini juga didukung oleh semua browser, jadi tidak perlu bantuan perpustakaan eksternal

Jika data JSON berada di file/halaman yang berbeda, kita dengan mudah memanggilnya dengan AJAX, tetapi jika berada di domain yang berbeda, ada cara lain untuk memanggilnya (tidak dapat dilakukan dengan ajax - dibahas di sini)

Itulah pembahasan tentang json pada javascript part I, semoga bermanfaat

Halaman demo dan unduh file

DEMO LANGSUNG

Untuk versi offline, kami telah menyediakan file php, css, javascript, sql serta petunjuk penggunaannya. Untuk mengunduhnya, silakan klik salah satu tombol media sosial berikut

UNDUH BERKAS

Referensi