Cara menggunakan JSONP pada JavaScript

Question

JSON adalah format untuk menyimpan dan mengangkut data.

Table of Contents Show

Apa itu JSON?
Contoh JSON
Format JSON Dievaluasi ke Object JavaScript
Aturan Sintaks JSON
Data JSON – Nama dan Nilai
Object JSON
Mengonversi Teks JSON menjadi Object JavaScript
Tutorial JavaScript Pemula Part 16 : Belajar JSON Pada Javascript
Belajar JSON Pada Javascript
Kenapa Harus Menggunakan JSON?
Contoh Penggunaan JSON Pada Javascript
JSON VS XML
JSON digunakan untuk apa?
Apa itu JSON dan contohnya?
Apa itu JSON JS?
Bagaimana cara membuka file JSON?

JSON sering digunakan saat data dikirim dari server ke halaman web.

Section Artikel

1 Apa itu JSON?
2 Contoh JSON
3 Format JSON Dievaluasi ke Object JavaScript
4 Aturan Sintaks JSON
5 Data JSON – Nama dan Nilai
6 Object JSON
7 Array JSON
8 Mengonversi Teks JSON menjadi Object JavaScript

Apa itu JSON?

JSON adalah singkatan dari JavaScript Object Notation
JSON adalah format pertukaran data ringan
JSON tidak bergantung pada bahasa *
JSON “mendeskripsikan diri sendiri” dan mudah dimengerti

Sintaks JSON diturunkan dari sintaks notasi object JavaScript, tetapi format JSON hanya teks. Kode untuk membaca dan menghasilkan data JSON dapat ditulis dalam bahasa pemrograman apa pun.

Contoh JSON

Sintaks JSON ini mendefinisikan object employee: array 3 record employee (object).

Contoh:

{
"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]
}

Format JSON Dievaluasi ke Object JavaScript

Format JSON secara sintaksis identik dengan kode untuk membuat object JavaScript.

Karena kemiripan ini, program JavaScript dapat dengan mudah mengubah data JSON menjadi object JavaScript asli.

Aturan Sintaks JSON

Data dalam pasangan nama / nilai
Data dipisahkan dengan koma
Tanda kurung kurawal menampung object
Tanda kurung siku menampung array

Data JSON – Nama dan Nilai

Data JSON ditulis sebagai pasangan nama / nilai, seperti properti object JavaScript.

Pasangan nama / nilai terdiri dari nama bidang (dalam tanda kutip ganda), diikuti oleh titik dua, diikuti dengan nilai:

Nama pada JSON membutuhkan tanda kutip ganda. Nama pada JavaScript tidak.

Object JSON

Object JSON ditulis di dalam kurung kurawal.

Sama seperti di JavaScript, object dapat berisi beberapa pasangan nama / nilai:

{"firstName":"John", "lastName":"Doe"}

Array JSON

Array pada JSON ditulis di dalam tanda kurung siku.

Sama seperti di JavaScript, sebuah array dapat berisi object:

"employees":[
  {"firstName":"John", "lastName":"Doe"},
  {"firstName":"Anna", "lastName":"Smith"},
  {"firstName":"Peter", "lastName":"Jones"}
]

Dalam contoh di atas, object “karyawan” adalah array. Array tersebut berisi tiga object.

Setiap object adalah catatan seseorang (dengan nama depan dan nama belakang).

Mengonversi Teks JSON menjadi Object JavaScript

Penggunaan umum JSON adalah untuk membaca data dari server web, dan menampilkan data di halaman web.

Sederhanyan, penggunaan JSON dapat didemonstrasikan dengan menggunakan string sebagai input.

Pertama, buat string JavaScript yang berisi sintaks JSON:

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Kemudian, gunakan fungsi JSON.parse() bawaan JavaScript untuk mengonversi string menjadi object JavaScript:

var obj = JSON.parse(text);

Terakhir, gunakan object JavaScript baru di halaman.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Buat Object dari JSON String</h2>

<p id="demo"></p>

<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

</body>
</html>

Tutorial JavaScript Pemula Part 16 : Belajar JSON Pada Javascript

Tutorial JavaScript Pemula Part 16 :Belajar JSON Pada Javascript - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan Belajar JSON Pada Javascript.

Kenapa kita belajar JSON? Karena ini bakalan banyak kamu temui jika kamu sedang membuat sebuah website atau belajar mengenai API. Jadi sangat penting ini kita pelajari karena JSON ini akan berhubungan dengan sebuah data.

Lanjut baca ya biar jelas!

Belajar JSON Pada Javascript

JSON adalah singkatan dari JavaScript Object Notation, yaitu format data yang digunakan untuk keperluan penyimpanan dan pertukaran data. JSON juga teks biasa yang ditulis dalam notasi objek JavaScript, JSON digunakan untuk mengirim data antar komputer dan JSON tidak bergantung pada bahasa.

Tutorial PHP Lanjutan Part 34 : Import Data Excel Ke MySQLi Dengan PHP Dan AJAX
Tutorial PHP Lanjutan Part 35 : Menampilkan Data Dari Database Menggunakan AJAX

Dalam bidang web, JSON biasanya digunakan untuk mengambil data dari server atau mengirim data ke server. JSON lebih sering digunakan daripada XML sebagai pendahulunya, Secara fungsinya JSON sama dengan XML, tapi JSON lebih cepat dan lebih mudah dibaca.

Kenapa Harus Menggunakan JSON?

Format JSON secara sintaksis mirip dengan kode untuk membuat objek JavaScript. Karena itu, program JavaScript dapat dengan mudah mengubah data JSON menjadi objek JavaScript.

Karena formatnya hanya teks, data JSON dapat dengan mudah dikirim antar komputer, dan digunakan oleh bahasa pemrograman apa pun.

JavaScript memiliki fungsi bawaan untuk mengubah string JSON menjadi objek JavaScript: JSON.parse()

JavaScript juga memiliki fungsi bawaan untuk mengubah objek menjadi string JSON: JSON.stringify()

Pada dasarnya JSON itu terdiri dari KEY dan VALUE seperti contoh dibawah ini:


{ "key" : "value" }

Dalam JavaScript, Kamu dapat menulis nilai string dengan tanda kutip ganda atau tunggal:


{ key : 'value' }

VALUE dalam JSON biasanya berupa tipe data seperti string, Boolean, Array, Object, NULL.

Contoh Penggunaan JSON Pada Javascript

Tadikan ada 2 fungsi bawaan dalam menangani data JSON yaitu JSON.parse() dan JSON.stringify(). Kita akan membuatkan contohnya satu persatu.

Contoh Penggunaan Fungsi JSON.parse()

Dicontoh yang pertama kita akan mengubah string JSON menjadi objek JavaScript. Perhatikan lah code dibawah ini:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar Javascript</title>
</head>
<body>
    <script>
        var data_json = '{"nama" : "Ilham Budiawan Sitorus", "pekerjaan" : "Freelance", "usia" : 19 }';
        data = JSON.parse(data_json);

        console.log(data);
    </script>
</body>
</html>

Hasilnya dapat kamu lihat pada Console dan kira-kira hasilnya akan seperti gambar dibawah:

Lalu kita coba dulu mengakses salah satu data dari data JSON yang kita buat. Perhatikan code dibawah:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar Javascript</title>
</head>
<body>
    <script>
        var data_json = '{"nama" : "Ilham Budiawan Sitorus", "pekerjaan" : "Freelance", "usia" : 19 }';
        data = JSON.parse(data_json);

        console.log(data.nama);
    </script>
</body>
</html>

Atau kamu bisa gunakan code dibawah ini untuk mengakses data JSON.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar Javascript</title>
</head>
<body>
    <script>
        var data_json = '{"nama" : "Ilham Budiawan Sitorus", "pekerjaan" : "Freelance", "usia" : 19 }';
        data = JSON.parse(data_json);

        console.log(data["nama"]);
    </script>
</body>
</html>

Hasilnya kira kira akan seperti dibawah gambar ini :

Berarti sampai sini kita dapat menyimpulkan bahwa untuk mengakses data dari JSON itu ada 2 cara, yang pertama seperti dibawah :


Variable.key

Atau bisa juga seperti ini


Variable["key"]

Lalu bagaimana caranya kita menganti atau mengubah data JSON? Cara cukup gampang kok, perhatikanlah code dibawah ini:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar Javascript</title>
</head>
<body>
    <script>
        var data_json = '{"nama" : "Ilham Budiawan Sitorus", "pekerjaan" : "Freelance", "usia" : 19 }';
        data = JSON.parse(data_json);

        console.log(data["nama"] = "Bela Nabila Sitorus");
    </script>
</body>
</html>

Hasilnya kira kira seperti gambar dibawah ini:

Contoh Penggunaan Fungsi JSON.stringify()

Fungsi JSON.stringify() digunakan untuk mengubah objek javascript menjadi string JSON. Objek tersebut dapat berupa array maupun objek. Perhatikanlah code dibawah ini:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar Javascript</title>
</head>
<body>
    <script>
        const data_json = {nama: "Ilham Budiawan Sitorus", pekerjaan: "Freelance", usia: 19 };
        data = JSON.stringify(data_json);

        console.log(data);
    </script>
</body>
</html>

Hasilnya terdapat diconsole dan hasilnya kira-kira seperti pada gambar dibawah:

Menyimpan Data JSON ke Localstorage atau Sessionstorage

Pada materi sebelumnya kita sudah belajar mengenai StorageWeb Browser Pada Javascript, bagi yang belum baca silahkan dibaca dulu agar paham mengenai syntax nya nanti. Sekarang saya ingin bereksperimen untuk menyimpan data ke Localstorage saja ya dan kita juga akan menampilkannya pada console jika data sudah berhasil disimpan. Perhatikan code dibawah ini:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar Javascript</title>
</head>
<body>
    <script>
        const data_json = {nama: "Ilham Budiawan Sitorus", pekerjaan: "Freelance", usia: 19 };
        const data = JSON.stringify(data_json);
        localStorage.setItem("uji_coba", data);

        let data_storage = localStorage.getItem("uji_coba");
        let output = JSON.parse(data_storage);
        console.log(output);
    </script>
</body>
</html>

Data sudah berhasil disimpan kedalam localstorage bisa kamu lihat pada gambar dibawah:

Setelah itu kita menampilkannya ke console maka hasilnya pun seperti gambar dibawah:

Di JSON, objek tanggal tidak diperbolehkan. Fungsi JSON.stringify() akan mengonversi tanggal apa pun menjadi string. Untuk meyakinkan kamu, saya sudah buat contohnya. Perhatikan lah code dibawah:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Belajar Javascript</title>
</head>
<body>
    <script>
        const data_json = {tanggal: new Date()};
        data = JSON.stringify(data_json);

        console.log(data);
    </script>
</body>
</html>

Untuk hasilnya akan seperti gambar dibawah ini:

JSON VS XML

Seperti yang saya katakan diatas bahwa JSON lebih bagus daripada XML dan sekarang saya akan menerangkan kenapa JSON itu lebih baik daripada XML.

Tutorial JavaScript Pemula Part 14 : Mengetahui Browser Object Mode Pada Javascript
Tutorial JavaScript Pemula Part 15 : Mengenal Dan Memahami Web Storage

JSON dan XML dapat digunakan untuk menerima data dari server web. Dibawah ini ada beberapa contoh sebuah data JSON dan XML. Perhatikanlah code dibawah

Data JSON


{"employees":[
  { "Nama":"Ilham Budiawan Sitorus", "umur":"19" },
  { "Nama":"Bela Nabila Sitorus", "umur":"16" },
  { "Nama":"Khoirun Nisa", "umur":"19" }
]}

Data XML


<employees>
  <employee>
    <Nama>Ilham Budiawan Sitorus</Nama> <umur>19</umur>
  </employee>
  <employee>
    <Nama>Bela Nabila Sitorus</Nama> <umur>16</umur>
  </employee>
  <employee>
    <Nama>Khoirun Nisa</Nama> <umur>19</umur>
  </employee>
</employees>

Alasan JSON Itu Seperti XML Karena

JSON dan XML "mendeskripsikan diri sendiri" (dapat dibaca manusia)
JSON dan XML bersifat hierarkis (nilai di dalam nilai)
JSON dan XML dapat diuraikan dan digunakan oleh banyak bahasa pemrograman
JSON dan XML dapat diambil dengan XMLHttpRequest

Alasan JSON Itu Tidak Seperti XML Karena

JSON tidak menggunakan tag akhir
JSON lebih pendek
JSON lebih cepat untuk membaca dan menulis
JSON dapat menggunakan array

Saya merekomendasikan JSON melalui XML saat melakukan Ajax. Mengapa? Karena mesin JavaScript dapat dengan mudah mengubah respons JSON itu menjadi objek JavaScript... memungkinkan Kamu mengakses/memanipulasi data itu dengan sangat mudah. Kamu hanya perlu menggunakan eval() atau JSON.parse() atau yang serupa (tergantung pada perpustakaan browser/javascript).

JSON adalah JavaScript yang valid; jadi secara keseluruhan itu jauh lebih baik dengan Ajax/Javascript/Web daripada XML.

JSON juga cenderung kurang bertele-tele, terutama dalam hal array dan pasangan key/value... sesuatu yang mungkin sering Anda temui dengan layanan web.

Daripada XML, orang cenderung membuat kosakata XML khusus mereka sendiri. Jadi, jika ada yang ingin menggunakan layanan Kamu, mereka juga harus mempelajari kosakata XML Kamu. JSON jauh lebih universal dalam hal ini.

Sekian materi kita mengenai JSON, next materi kita akan membahas mengenai AJAX agar kita bisa jauh lebih dekat ke tahap tingkat menengah dalam belajar Javascript.

Semoga Bermanfaat!

JSON digunakan untuk apa?

Jadi, JSON adalah singkatan dari JavaScript Object Notation merupakan suatu format yang digunakan untuk menyimpan, membaca, serta menukar informasi dari web server sehingga dapat dibaca oleh para pengguna.

Apa itu JSON dan contohnya?

JSON (dilafalkan "Jason"), singkatan dari JavaScript Object Notation (bahasa Indonesia: notasi objek JavaScript), adalah suatu format ringkas pertukaran data komputer. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif (disebut objek).

Apa itu JSON JS?

JSON (JavaScript Object Notation) adalah sebuah format data yang digunakan untuk pertukaran dan penyimpanan data. JSON merupakan bagian (subset) dari Javascript. JSON bisa dibaca dengan berbagai macam bahasa pemrograman seperti C, C++, C#, Java, Javascript Perl, Python, dan banyak lagi.