rumah > instruksi > Apa itu JSON dan mengapa menggunakannya? Pengantar JSON Data apa yang digunakan format json?


Apa itu JSON dan mengapa menggunakannya? Pengantar JSON Data apa yang digunakan format json?




JSON atau Notasi Objek JavaScript adalah format yang mengimplementasikan representasi tekstual tidak terstruktur dari data terstruktur berdasarkan prinsip pasangan nilai kunci dan daftar terurut. Meskipun JSON berasal dari JavaScript, JSON didukung di sebagian besar bahasa, baik secara asli atau dengan bantuan perpustakaan khusus. Biasanya Json digunakan untuk bertukar informasi antara klien web dan server web.

Selama 15 tahun terakhir, JSON telah menjadi standar pertukaran data formal dan digunakan hampir di semua tempat di Internet. Saat ini digunakan oleh hampir semua server web. Alasan lain untuk popularitas ini adalah kenyataan bahwa banyak database yang mendukung JSON. Database relasional modern seperti PostgreSQL dan MySQL kini mendukung penyimpanan dan ekspor data dalam JSON. Basis data seperti MongoDB dan Neo4j juga mendukung JSON, meskipun MongoDB menggunakan versi JSON yang sedikit dimodifikasi. Pada artikel ini, kita akan melihat apa itu JSON, kelebihannya dibandingkan XML, kekurangannya, dan waktu terbaik untuk menggunakannya.

Untuk memahami mengapa format JSON diperlukan dan cara kerjanya, Anda memerlukan latihan. Pertama mari kita lihat contoh ini:

{
"Nama Depan": "Jonathan",
“Nama Belakang”: “Orang Bebas”,
“Jumlah masuk”: 4,
"isWriter": benar,
“worksWith”: [“Spantree Technology Group”, “InfoWorld”],
“hewan peliharaan”: [
{
“nama”: “Lilly”,
“ketik”: “Rakun”
}
]
}

Dalam kerangka ini, kami telah mendefinisikan dengan jelas beberapa atribut seseorang. Pertama, kami menentukan nama depan, nama belakang, jumlah login di sistem, apakah orang tersebut seorang penulis, daftar perusahaan tempat dia bekerja, dan daftar hewan peliharaan. Struktur ini atau struktur serupa dapat ditransfer dari server ke browser web atau aplikasi seluler, yang kemudian dapat melakukan apa pun yang diperlukan dengan data ini, misalnya, menampilkan atau menyimpannya.

JSON adalah format data umum dengan jumlah tipe nilai minimum - string, angka, boolean (satu atau nol), daftar, objek, dan null. Meskipun JSON adalah bagian dari JavaScript, sebagian besar bahasa pemrograman populer memiliki jenis data ini, menjadikan JSON kandidat yang baik untuk meneruskan data antar program yang ditulis dalam bahasa berbeda.

Mengapa Anda harus menggunakan JSON?

Untuk memahami kegunaan dan pentingnya JSON, kita perlu memahami sedikit tentang sejarah interaktivitas di Internet. Pada awal tahun 2000-an, interaktivitas situs web mulai berubah. Pada saat itu, browser hanya berfungsi untuk menampilkan informasi, dan server web melakukan semua pekerjaan mempersiapkan konten untuk ditampilkan. Ketika pengguna mengklik tombol di browser, permintaan dikirim ke server, tempat halaman HTML disusun dan dikirim, siap untuk ditampilkan. Mekanisme ini lambat dan tidak efektif. Hal ini mengharuskan browser untuk merender ulang semua yang ada di halaman, meskipun sebagian kecil datanya berubah.

Pada saat itu, transfer dikenakan biaya berdasarkan jumlah data yang ditransfer, sehingga pengembang menyadari bahwa memuat ulang seluruh halaman sangatlah mahal dan mempertimbangkan teknologi baru untuk meningkatkan antarmuka pengguna. Kemudian kemampuan untuk membuat permintaan web di latar belakang, yang ditambahkan di Internet Explorer 5, ternyata merupakan pendekatan yang cukup layak untuk memuat data secara bertahap untuk ditampilkan. Alih-alih memuat ulang halaman, mengklik tombol tersebut hanya akan mengeluarkan permintaan web yang akan berjalan di latar belakang. Konten akan diperbarui segera setelah dimuat. Itu dapat dikontrol menggunakan JavaScript, bahasa pemrograman universal untuk browser.

Awalnya, data ditransfer dalam format XML, namun sulit digunakan dalam JavaScript. JavaScript sudah memiliki objek yang digunakan untuk merepresentasikan data dalam bahasa tersebut, jadi Douglas Crockford mengambil sintaks objek JS dan menggunakannya sebagai spesifikasi untuk format pertukaran data baru yang disebut JSON. Format ini lebih mudah dibaca dan diurai di browser JavaScript. Tak lama kemudian, pengembang mulai menggunakan JSON, bukan XML.

Saat ini, pertukaran data JSON yang cepat adalah standar de facto untuk mentransfer data antara server dan klien, aplikasi seluler, dan bahkan layanan sistem internal.

JSON vs XML

Seperti yang saya katakan di atas, alternatif utama untuk JSON adalah XML. Namun, XML menjadi kurang umum di sistem baru. Dan sangat mudah untuk memahami alasannya. Di bawah ini adalah contoh penulisan data yang Anda lihat di atas dalam Json melalui XML:


Jonatan
Warga kehormatan
4
BENAR

Grup Teknologi Spantree
InfoDunia

Lili
Rakun


Selain redundansi kode, yang pada dasarnya memakan ruang dua kali lebih banyak untuk menulis data, XML juga menimbulkan beberapa ambiguitas saat menganalisis struktur data. Mengonversi XML menjadi objek JavaScript memerlukan waktu puluhan hingga ratusan baris kode dan memerlukan penyesuaian yang baik untuk setiap objek yang diuraikan. Mengonversi JSON menjadi objek JavaScript dilakukan dalam satu baris dan tidak memerlukan pengetahuan sebelumnya tentang objek yang diurai.

Batasan JSON

Meskipun JSON adalah format data yang relatif terkompresi dan fleksibel serta mudah digunakan dalam banyak bahasa pemrograman, JSON memiliki beberapa kelemahan. Berikut beberapa batasannya:

  • Tidak ada struktur. Di satu sisi, ini berarti Anda memiliki fleksibilitas penuh untuk menyajikan data sesuai keinginan Anda. Di sisi lain, Anda dapat dengan mudah menyimpan data tidak terstruktur.
  • Hanya satu jenis angka. IEEE-754 floating point dan format presisi ganda didukung. Itu cukup banyak, namun Anda tidak bisa menggunakan variasi tipe numerik yang dimiliki bahasa lain.
  • Tidak ada jenis tanggal. pengembang harus menggunakan representasi string tanggal, yang dapat menyebabkan ketidakkonsistenan format. Atau gunakan tanggal jumlah milidetik yang telah berlalu sejak awal zaman Unix (1 Januari 1970).
  • Belum ada komentar- Anda tidak akan dapat memberi anotasi pada kolom yang memerlukannya secara langsung dalam kode.
  • Detil- Meskipun JSON tidak terlalu bertele-tele dibandingkan XML, ini bukanlah format pertukaran data yang paling terkompresi. Untuk layanan kelas atas atau khusus, Anda sebaiknya menggunakan format yang lebih efisien.

Kapan sebaiknya Anda menggunakan JSON?

Jika Anda mengembangkan perangkat lunak yang berinteraksi dengan browser atau aplikasi seluler asli, sebaiknya gunakan JSON. Penggunaan XML sudah tidak digunakan lagi. Untuk komunikasi antar server, JSON mungkin tidak terlalu efisien dan lebih baik menggunakan kerangka serialisasi yang mirip dengan Apache Avro atau Apache Thrift. Bahkan di sini, JSON bukanlah pilihan yang buruk dan dapat memberikan semua yang Anda butuhkan. Namun tidak ada jawaban pasti apa yang harus dipilih.

Jika Anda menggunakan database MySQL, program Anda akan sangat bergantung pada apa yang dilakukan di database. Dalam database relasional yang mendukung JSON, penggunaan sesedikit mungkin dianggap sebagai praktik yang baik. Basis data relasional dirancang untuk data dengan skema tertentu. Meskipun sebagian besar dari mereka sekarang mendukung format data JSON, kinerja bekerja dengannya akan jauh lebih rendah.

kesimpulan

JSON adalah format data yang ditujukan terutama untuk mengirimkan data antara server web dan browser atau aplikasi seluler. Formatnya memiliki desain yang sederhana dan fleksibel, mudah dibaca dan dipahami, serta mudah digunakan dengan data tersebut di sebagian besar bahasa pemrograman. Kurangnya skema yang ketat memungkinkan adanya fleksibilitas dalam format, namun fleksibilitas ini terkadang membuat data sulit dibaca dan dipahami.

Anda mungkin mengalami kesulitan bekerja dengan JSON dalam bahasa yang sangat diketik seperti Scala atau Elm, tetapi adopsi format yang luas berarti terdapat utilitas dan perpustakaan untuk membantu mengatasi masalah yang rumit sekalipun. Sekarang Anda tahu apa itu json dan cara menggunakannya.

JSON (JavaScript Object Notation) adalah format transfer data. Seperti namanya, formatnya didasarkan pada bahasa pemrograman JavaScript, tetapi tersedia juga dalam bahasa lain (Python, Ruby, PHP, Java).

JSON menggunakan ekstensi .json. Saat digunakan dalam format file lain (seperti .html), string JSON dikutip atau ditetapkan ke variabel. Format ini mudah ditransfer antara server web dan klien atau browser.

Ringan dan mudah dimengerti, JSON adalah alternatif yang bagus untuk XML.

Tutorial ini akan memperkenalkan Anda pada manfaat, objek, struktur umum, dan sintaksis JSON.

Sintaks dan struktur JSON

Objek JSON dalam bentuk nilai kunci dan biasanya ditulis dalam kurung kurawal. Saat bekerja dengan JSON, semua objek disimpan dalam file .json, namun objek tersebut juga bisa ada sebagai objek terpisah dalam konteks program.

Objek JSON terlihat seperti ini:

"nama_depan" : "John",
"nama_belakang" : "Smith",
"lokasi" : "London",
"online" : benar,
"pengikut" : 987

Ini adalah contoh yang sangat sederhana. Objek JSON dapat berisi banyak baris.

Seperti yang Anda lihat, sebuah objek terdiri dari pasangan nilai kunci yang diapit kurung kurawal. Sebagian besar data di JSON ditulis sebagai objek.

Titik dua ditempatkan di antara kunci dan nilai. Setelah setiap pasangan Anda perlu memberi koma. Hasilnya adalah:

"kunci" : "nilai", "kunci" : "nilai", "kunci" : "nilai"

Kunci JSON ada di sebelah kiri. Kuncinya harus ditempatkan dalam tanda kutip ganda. String apa pun yang valid dapat digunakan sebagai kunci. Dalam satu objek, semua kunci harus unik. Kuncinya mungkin berisi spasi (“nama depan”), tetapi pemrograman mungkin mengalami masalah dalam mengakses kunci tersebut. Oleh karena itu, daripada menggunakan spasi, lebih baik menggunakan garis bawah (“nama_depan”).

Nilai JSON ada di sisi kanan kolom. Tipe data sederhana apa pun dapat digunakan sebagai nilai:

  • string
  • Angka
  • Objek
  • Array
  • Data Boolean (benar atau salah)

Nilai juga dapat diwakili oleh tipe data yang kompleks (misalnya objek atau array JSON).

JSON mendukung sintaks individual untuk masing-masing tipe data yang tercantum di atas: jika nilai diwakili oleh string, maka nilai tersebut akan dikutip, tetapi jika berupa angka, maka tidak.

Biasanya, data dalam file .json ditulis dalam kolom, namun JSON juga dapat ditulis dalam baris:

( "nama_depan" : "John", "nama_belakang" : "Smith", "online" : benar, )

Ini adalah cara data JSON biasanya ditulis ke jenis file lain.

Dengan menulis data JSON ke kolom, Anda meningkatkan keterbacaan file (terutama jika ada banyak data di dalam file). JSON mengabaikan spasi antar kolom, sehingga Anda dapat menggunakannya untuk membagi data menjadi sejumlah kolom yang dapat dikelola.

"nama_depan" : "John",
"nama_belakang" : "Smith",
"online" : benar

Perhatikan bahwa objek JSON sangat mirip dengan objek JavaScript, tetapi formatnya tidak sama. Misalnya, Anda bisa menggunakan fungsi di JavaScript, tapi tidak di JSON.

Keunggulan utama JSON adalah data dalam format ini didukung oleh banyak bahasa pemrograman populer, sehingga dapat ditransfer dengan cepat.

Anda sekarang sudah familiar dengan sintaks dasar JSON. Namun file JSON dapat memiliki struktur hierarki yang kompleks yang mencakup array dan objek bertingkat.

Tipe kompleks di JSON

JSON dapat menyimpan objek dan array bersarang, yang akan diteruskan sebagai nilai kunci yang ditetapkan padanya.

Objek bersarang

Di bawah ini Anda akan menemukan contoh - file pengguna.json, yang berisi data pengguna. Untuk setiap pengguna

(“john”, “jesse”, “drew”, “jamie”) objek bersarang diteruskan sebagai nilai, yang, pada gilirannya, juga terdiri dari kunci dan nilai.

Catatan: Objek JSON bersarang pertama disorot dengan warna merah.

"johan" :(
"nama pengguna": "John",
"lokasi" : "London",
"online" : benar,
"pengikut" : 987

"jess" :(
"nama pengguna": "Jesse",
"lokasi" : "Washington",
"online" : salah,
"pengikut" : 432

"menggambar" :(
"nama pengguna": "Menarik",
"lokasi" : "Paris",
"online" : salah,
"pengikut" : 321

"jamie" :(
"nama pengguna": "Jamie",
"lokasi" : "Berlin",
"online" : benar,
"pengikut" : 654

Perhatikan bahwa kurung kurawal digunakan pada objek bersarang dan objek utama. Koma pada objek bersarang digunakan dengan cara yang sama seperti pada objek biasa.

Array Bersarang

Data dapat disarangkan di JSON menggunakan array JavaScript, yang akan diteruskan sebagai nilai. JavaScript menggunakan tanda kurung siku () di awal dan akhir array. Array adalah kumpulan data terurut yang dapat berisi berbagai jenis data.

Array digunakan untuk mentransfer sejumlah besar data yang dapat dikelompokkan. Misalnya, mari kita coba merekam data pengguna.

{
"nama_depan" : "John",
"nama_belakang" : "Smith",
"lokasi" : "London",
"situs web" : [

"deskripsi": "pekerjaan",
"URL" : "https://www.johnsmithsite.com/"

},
{

"deskripsi" : "tutorial",
"URL" : "https://www.johnsmithsite.com/tutorials"

"media sosial" : [

"deskripsi": "twitter",
"tautan" : "https://twitter.com/johnsmith"

"deskripsi": "facebook",
"tautan" : "https://www.facebook.com/johnsmith"

"deskripsi": "github",
"tautan" : "https://github.com/johnsmith"

Kunci “situs web” dan “media_sosial” diberi array sebagai nilai, yang ditempatkan dalam tanda kurung siku.

Dengan menggunakan array dan objek bersarang, Anda dapat membuat hierarki data yang kompleks.

JSON atau XML?

XML (eXtensible Markup Language) memungkinkan Anda menyimpan data dalam bentuk yang mudah dipahami manusia dan mesin. Format XML didukung oleh banyak bahasa pemrograman.

XML dan JSON memiliki banyak kesamaan. Namun, XML memerlukan lebih banyak teks, yang berarti file tersebut lebih besar dan lebih sulit untuk dibaca dan ditulis. Apalagi XML hanya diproses menggunakan interpreter XML, sedangkan JSON dapat diproses menggunakan fungsi sederhana. Berbeda dengan JSON, XML tidak dapat menyimpan array.

Mari kita bandingkan dua file: keduanya berisi data yang sama, tetapi yang pertama ditulis dalam format XML, dan yang kedua dalam JSON.

pengguna.xml

Yohanes London

Jessi Washington

Menarik Paris

Jamie Berlin

pengguna.json
("pengguna": [

("nama pengguna" : "John", "lokasi" : "London"),
("nama pengguna" : "Jesse", "lokasi" : "Washington"),
("nama pengguna" : "Drew", "lokasi" : "Paris"),
("nama pengguna" : "JamieMantisShrimp", "lokasi" : "Berlin")

JSON adalah format yang sangat ringkas dan tidak memerlukan tag sebanyak XML. Selain itu, XML, tidak seperti JSON, tidak mendukung array.

Jika Anda familiar dengan HTML, Anda akan melihat bahwa format XML sangat mirip dengannya (khususnya tag). JSON lebih sederhana, memerlukan lebih sedikit teks, dan lebih mudah digunakan dalam aplikasi AJAX, misalnya.

Tentu saja formatnya harus dipilih tergantung kebutuhan aplikasi.

Alat untuk JSON

JSON umumnya digunakan dalam JavaScript, tetapi format ini banyak digunakan dalam bahasa pemrograman lain.

Informasi lebih lanjut tentang kompatibilitas dan pemrosesan JSON dapat ditemukan di situs web proyek dan perpustakaan jQuery.

Jarang sekali menulis JSON dari awal. Biasanya, data diambil dari sumber atau dikonversi ke JSON. Anda dapat mengonversi data CSV atau data yang dibatasi tab ke JSON menggunakan alat sumber terbuka Mr. Pengonversi Data. Untuk mengonversi XML ke JSON dan sebaliknya, gunakan utilitas-online.info. Saat bekerja dengan alat otomatis, pastikan untuk memeriksa hasilnya.

File JSON (termasuk data yang dikonversi) dapat diperiksa menggunakan layanan JSONLint. Untuk menguji JSON dalam konteks pengembangan web, lihat JSFiddle.

Kesimpulan

JSON adalah format data yang sederhana dan ringan. File JSON mudah untuk ditransfer, disimpan, dan digunakan.

Saat ini JSON sering digunakan di API.

JSON adalah format teks untuk merekam data. Ini memungkinkan Anda untuk merepresentasikan dalam bentuk teks baik angka atau string tunggal, dan struktur kompleks, misalnya array dengan data. Menggunakan format perekaman ini nyaman karena mudah dibaca dan intuitif, sekaligus memungkinkan Anda menyimpan struktur data yang sangat kompleks. Selain itu, lebih ringkas dibandingkan xml, jadi menurut saya lebih disukai untuk pertukaran data antara browser web dan server.

Sintaks JSON dengan contoh

Format json biasanya ditulis dalam 2 varian:

1. Urutan nilai. Misalnya, urutan 10, 15 dan "test" dalam format JSON akan terlihat seperti ini:

2. Merekam secara berpasangan kunci: nilai . Misalnya:

(“Nama lengkap”: “Ivanov Sergey”, “Tanggal lahir”: “03/09/1975”)

Contoh yang sedikit lebih rumit:

("Nama Lengkap": "Ivanov Sergey", "Alamat": ("Kota": "Moskow", "Jalan": "Pyatnitskaya", "Rumah": "35") )

Fungsi PHP untuk bekerja dengan format JSON

Dalam bahasa PHP sejak versi 5.2. hanya ada 4 fungsi:

  • json_decode- Mendekode string JSON (mendapatkan data dari string format json)
  • json_encode- Mengembalikan representasi data JSON (mengonversi data menjadi string JSON)
  • json_last_error_msg- Mengembalikan string yang menunjukkan pesan kesalahan dari panggilan terakhir ke json_encode() atau json_decode()
  • json_last_error- Mengembalikan kesalahan terakhir

Pada dasarnya, hanya dua fungsi yang digunakan secara umum: json_encode Dan json_decode. Saya tidak akan membahas detail sintaksnya, Anda dapat melihat php.net untuk lebih jelasnya. Contoh penggunaan:

$arr1 = susunan(0,1,2); $json_str = json_encode($arr1); gema $json_str; // akan menampilkan string json: $arr2 = json_decode($json_str); gema $arr2; // akan menampilkan: 1

catatan : pada pengkodean ke dalam format data JSON dalam bahasa Rusia, fungsi json_encode mengubah karakter Rusia menjadi unicode, yaitu menggantikannya dengan \uXXXX dan dengan demikian string json menjadi tidak dapat dibaca oleh manusia (tetapi dapat dimengerti oleh browser). Jika Anda ingin menghindari konversi ke Unicode (misalnya, saat men-debug kode), Anda cukup menggunakan opsi JSON_UNESCAPED_UNICODE.

Selain itu, agar garis miring yang keluar tidak ditambahkan selama pengkodean dan agar string dengan angka dikodekan sebagai angka, Anda dapat menggunakan JSON_UNESCAPED_SLASHES dan JSON_NUMERIC_CHECK. Hasilnya, agar string json dapat dibaca manusia, kita akan melakukan, misalnya, ini:

$arr = array("fio" => "Ivanov Sergey", "usia" => "32", "vk_url" => "https://vk.com/id11111"); echo json_encode($arr, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_NUMERIC_CHECK);

Tanpa menggunakan opsi ini, garisnya akan menjadi seperti ini:

( "fio" : "\u0418\u0432\u0430\u043d\u043e\u0432 \u0421\u0435\u0440\u0433\u0435\u0439", "usia" : "32", "vk_url": "https:\/\ /vk.com\/id11111" )

dan menggunakan opsi, kita mendapatkan baris yang dapat dibaca:

( "fio" : "Ivanov Sergey", "usia" : 32, "vk_url" : "https://vk.com/id11111" )

Satu hal lagi: jika Anda memerlukan fungsi untuk memecahkan kode string json json_decode mengembalikan array dengan tepat, cukup tambahkan parameter kedua ke fungsi yang sama dengan true.

$json_str = "( "a":1, "b":2, "c":3 )"; $obj = json_decode($json_str); // ambil objeknya echo $obj->a; // akan menampilkan 1 $arr = json_decode($json_str, true); // dapatkan array asosiatif echo $arr["a"]; // akan mencetak 1

Ini menyimpulkan ulasan saya tentang fungsi PHP.

Fungsi JavaScript untuk bekerja dengan format JSON

Mari kita mulai dengan fakta bahwa format JSON awalnya diciptakan untuk bahasa JavaScript dan kemudian menjadi format teks terpisah yang digunakan dalam berbagai bahasa. Rupanya, inilah mengapa sintaks JSON sangat mirip dengan sintaks untuk menulis objek dan array biasa.

// Contoh array di JavaScript arr = ; peringatan(arr); // akan menampilkan 1 // Contoh objek dalam JavaScript obj = ( "name": "Vasya", "age": 35, "isAdmin": false ) alert(obj.name); // akan mencetak "Vasya"

Fungsi JavaScript yang digunakan untuk mengkonversi ke dan dari format JSON:

  • JSON.mengurai- mendekode string JSON (mengonversi string menjadi objek dan/atau array)
  • JSON.stringify- mengembalikan representasi data JSON (mengonversi objek dan/atau array menjadi string json)

Contoh sederhana mendekode string json ke dalam array dengan angka:

Str = ""; arr = JSON.parse(str); peringatan(arr); // akan mencetak 1

Contoh mengonversi (membuat serialisasi) suatu objek menjadi string JSON:

Obj = ( "nama": "Vasya", "usia": 35, "isAdmin": false ) alert(JSON.stringify(obj)); // akan menampilkan ("nama":"Vasya","umur":35,"isAdmin":false)

Saat membuat serial (mengonversi) suatu objek menjadi string JSON, metode ini dipanggil keJSON objek ini, jika ada. Jika tidak ada metode, maka semua properti objek akan dicantumkan. Contoh konversi objek dengan metode toJSON:

Obj = ( "nama": "Vasya", "usia": 35, "isAdmin": false, toJSON: function() ( return this.age; ) ) alert(JSON.stringify(obj)); // akan mencetak 35

Contoh penerapan praktis format JSON

Sebenarnya saya pribadi menggunakan format JSON dalam 2 situasi utama:

1. Mentransfer data antara browser dan server menggunakan permintaan Ajax.

Misalnya, kami memiliki beberapa halaman di mana kami perlu memperbarui data tanpa memuat ulang halaman tersebut. Katakanlah Anda memerlukan informasi dengan daftar karyawan dan data mereka untuk “diunduh” dari server.

Dalam JavaScript, menggunakan jQuery, kami menyederhanakan dan menampilkan data dalam bentuk tabel di browser:

$.getJSON("get-info.php").success(function(data) ( // permintaan ajax, data dari server akan ditulis ke variabel data htmlstr = "

"; untuk (var i=0; i "; // kolom pertama - nama lengkap htmlstr += " "; // kolom kedua - Tanggal lahir htmlstr += ""; ) htmlstr = "
" + data[i].ulang tahun + "
"; $("div.info").html(htmlstr); // dalam div dengan kelas info kami menampilkan tabel yang dihasilkan dengan data ));

Di server, skrip get-info.php yang digunakan untuk membuat permintaan ajax, misalnya, bisa seperti ini:

$user_info = susunan(); // membuat array dengan data $user_info = array ("fio" => "Ivanov Sergey", "birthday" => "03/09/1975"); $user_info = array ("fio" => "Alexey Petrov", "ulang tahun" => "18/09/1983"); echo json_encode($user_info); KELUAR;

Dalam contoh ini, string JSON yang diteruskan dari server ke browser adalah seperti ini:

[("fio":"Sergey Ivanov","ulang tahun":"09/03/1975"),("fio":"Alexey Petrov","ulang tahun":"18/09/1983")]

Sengaja saya tidak menampilkan garis yang berbentuk “pohon”, karena itu ditransmisikan persis dalam bentuk ini. Dan bagaimana Anda bisa mengevaluasi, merekam data dalam format JSON ternyata sangat kompak, yang berarti transfer data ini dari server ke browser akan terjadi hampir seketika.

2. Menulis struktur data yang kompleks ke dalam database.

Terkadang ada situasi ketika tidak disarankan untuk membuat tabel lain di database untuk menyimpan berbagai data. Katakanlah pengguna yang terdaftar di situs memiliki kemampuan untuk menyesuaikan warna latar belakang dan warna teks.

Daripada membuat tabel lain untuk 2 pengaturan, Anda cukup membuat kolom teks di tabel dengan daftar pengguna untuk menempatkan data pengaturan pengguna. Maka permintaan pembaruan pengaturannya bisa, misalnya, seperti ini:

PERBARUI pengguna SET pengaturan = "("warna latar":"#FFFFFF", "warna teks":"#000000")" WHERE user_id = 10

Nantinya, setelah didapat dari tabel pengguna informasi, skrip php dapat dengan mudah mengubahnya kembali menjadi array dengan pengaturan. Misalnya, jika variabel $user_info berisi data yang diperoleh pengguna dari tabel pengguna, mendapatkan array dengan pengaturan sangatlah mudah:

$pengaturan = json_decode($user_info["pengaturan"], benar); echo "Warna latar belakang = ".$settings["warna latar"]; echo "Warna teks = ".$settings["warna teks"];

Dalam format JSON, Anda juga dapat, misalnya, mencatat di database opsi produk mana yang dipilih pembeli.

("15":["45","47"], "18":"52") // opsi 15 memiliki nilai 45 dan 47 yang dipilih, dan opsi 18 memiliki nilai 52 yang dipilih

Pada prinsipnya, Anda bahkan dapat menulis seluruh isi keranjang dalam format JSON, misalnya seperti ini:

( "user_id" : 10, "session_id" : "2c2l3h4ii271aojentejtdcmh3", "produk": [ ( "product_id" : 15, "options" : ( "15" : , "18" : 52), "quantity" : 1, "harga" : 1500 ), ( "id_produk" : 16, "pilihan" : ( "15" : , "18" : 51 ), "kuantitas" : 2, "harga" : 1000 ) ] )

Dalam bentuk non-pohon biasanya, string JSON ini akan seperti ini:

("user_id":10,"session_id":"2c2l3h4ii271aojentejtdcmh3","products":[("product_id":15,"options":("15":,"18":52),,"quantity":1 , "harga":1500),("id_produk":16,"pilihan":("15":,"18":51),,"kuantitas":2,"harga":1000)])

Jadi, seperti dapat dilihat dari contoh, hampir semua informasi dapat disimpan dan dikirimkan dalam format JSON.

Notasi Objek JavaScript (JSON) adalah format teks standar untuk merepresentasikan data terstruktur berdasarkan sintaksis objek JavaScript. Biasa digunakan untuk transfer data pada aplikasi web (misalnya mengirimkan sejumlah data dari server ke klien agar dapat ditampilkan pada halaman web atau sebaliknya). Anda akan sering mengalami hal ini, jadi dalam artikel ini kami memberikan semua yang Anda perlukan untuk bekerja dengan JSON menggunakan JavaScript, termasuk mengurai JSON sehingga Anda dapat mengakses data di dalamnya dan membuat JSON.

Tidak, sebenarnya, apa itu JSON?

Kami akan memuatnya ke halaman kami dan menggunakan beberapa manipulasi DOM yang rapi untuk merendernya, seperti ini:

Menerima JSON

Untuk menerima JSON kita akan menggunakan API yang disebut XMLHttpRequest (sering disebut XHR). Ini adalah objek JavaScript yang sangat berguna yang memungkinkan kita membuat permintaan jaringan untuk mengambil sumber daya dari server melalui JavaScript (misalnya gambar, teks, JSON, bahkan cuplikan HTML), artinya kita dapat memperbarui sebagian kecil konten tanpa harus memuat ulang seluruh halaman . Hal ini menghasilkan halaman web yang lebih responsif dan terdengar menarik, namun sayangnya hal ini berada di luar cakupan artikel ini untuk mengajarkannya secara lebih rinci.

  1. Mari kita mulai dengan fakta bahwa kita akan menyimpan URL JSON yang ingin kita terima dalam sebuah variabel. Tambahkan kode JavaScript berikut: var requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
  2. Untuk membuat permintaan, kita perlu membuat instance objek permintaan baru dari konstruktor XMLHttpRequest menggunakan kata kunci new. Tambahkan baris berikut ini sebagai baris terakhir Anda: var request = new XMLHttpRequest();
  3. Sekarang kita perlu membuka permintaan baru menggunakan . Tambahkan baris berikut: request.open("GET", requestURL);

    Ini memerlukan setidaknya dua parameter - ada parameter lain yang tersedia. Kita hanya memerlukan dua hal yang diperlukan untuk contoh sederhana ini:

    • Metode HTTP yang digunakan saat membuat permintaan jaringan. Kasus ini baik-baik saja karena kami hanya mengambil beberapa data sederhana.
    • URL permintaannya adalah URL file JSON yang kita simpan tadi.
  4. Kemudian tambahkan dua baris berikut: Di sini kita menyetel ke JSON sehingga XHR mengetahui bahwa server akan mengembalikan JSON dan ini harus diubah di belakang layar menjadi objek JavaScript. Kemudian kita mengirimkan request dengan menggunakan metode: request.responseType = "json"; permintaan dikirim();
  5. Bagian terakhir dari bagian ini melibatkan menunggu respons balik dari server dan kemudian menanganinya. Tambahkan kode berikut di bawah kode Anda sebelumnya: request.onload = function() ( var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); )

Di sini kita menyimpan respons terhadap permintaan kita (tersedia di properti) dalam variabel superHeroes; variabel ini sekarang akan berisi objek JavaScript berbasis JSON! Kami kemudian meneruskan objek ini ke dua pemanggilan fungsi - yang pertama akan terisi

dengan data yang benar, dan yang kedua akan membuat kartu informasi untuk setiap hero dalam tim dan memasukkannya ke dalamnya
.

Kami membungkus kode dalam event handler yang diaktifkan ketika event load diaktifkan pada objek permintaan (lihat) - ini karena event load dipicu ketika respons berhasil dikembalikan; melakukannya dengan cara ini memastikan bahwa request.response pasti akan tersedia ketika kita mencoba dan melakukan sesuatu untuk mengatasinya.

Pengisian Tajuk

Sekarang kita telah mengekstrak data JSON dan mengubahnya menjadi objek JavaScript, mari kita manfaatkan dengan menulis dua fungsi yang telah kita tautkan di atas. Pertama-tama, tambahkan definisi fungsi berikut di bawah kode sebelumnya:

Fungsi populateHeader(jsonObj) ( var myH1 = document.createElement("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement("p"); myPara. textContent = "Kampung Halaman: " + jsonObj["Kota Asal"] + " // Terbentuk: " + jsonObj["terbentuk"];

Kami menamai parameter jsonObj untuk mengingatkan diri sendiri bahwa objek JavaScript ini berasal dari JSON. Di sini kita pertama kali membuat elemennya

with , setel sama dengan properti squadName objek, lalu tambahkan ke header with . Kami kemudian melakukan operasi yang sangat mirip dengan paragraf: kami membuatnya, mengatur konten teksnya, dan menambahkannya ke judul. Satu-satunya perbedaan adalah bahwa teksnya ditentukan sebagai string gabungan yang berisi properti kota asal dan properti bentukan objek.

Membuat Kartu Informasi Pahlawan

Kemudian tambahkan fungsi berikut di bagian bawah kode yang membuat dan menampilkan kartu superhero:

Fungsi showHeroes(jsonObj) ( var hero = jsonObj["anggota"]; for (var i = 0; i< heroes.length; i++) { var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } }

Pertama, mari simpan properti member dari objek JavaScript dalam variabel baru. Array ini berisi beberapa objek yang berisi informasi untuk setiap hero.

Kami kemudian menggunakannya untuk mengulang setiap objek dalam array. Untuk masing-masingnya, kami:

  1. Mari buat beberapa elemen baru:
    ,

    , tiga

    DAN

      .
    • Menginstal

      untuk memuat nama pahlawan saat ini.

    • Isi tiga paragraf dengan secretIdentity , age , dan baris yang bertuliskan “Superpowers:” untuk memasukkan informasi ke dalam daftar.
    • Kami menyimpan properti kekuatan dalam variabel baru lainnya yang disebut superPowers - ini berisi array yang berisi daftar kekuatan super pahlawan saat ini.
    • Kami menggunakan loop for lain untuk menelusuri kekuatan super pahlawan saat ini - untuk masing-masing kekuatan super tersebut kami membuat elemen
    • , letakkan kekuatan super di dalamnya, lalu letakkan listItem di dalam elemen
        (Daftar Saya) menggunakan appendChild() .
      • Hal terakhir yang kami lakukan adalah menambahkan

        ,

        DAN

          di dalam
          (Artikel saya) lalu tambahkan
          V
          . Urutan penambahan sesuatu itu penting, karena ini adalah urutan kemunculannya di dalam HTML.

Catatan. Jika Anda kesulitan mengikuti notasi titik/tanda kurung yang kami gunakan untuk mengakses objek JavaScript, mungkin ada baiknya jika Anda membuka file superheroes.json di tab atau editor teks lain dan merujuk ke file tersebut saat Anda melihat JavaScript kami. Anda juga dapat merujuk ke artikel kami untuk informasi lebih lanjut tentang notasi titik dan tanda kurung.

Konversi antara objek dan teks

Contoh di atas sederhana dalam hal mengakses objek JavaScript karena kami menetapkan permintaan XHR untuk secara langsung mengonversi respons JSON ke objek JavaScript menggunakan .