Notasi Objek JavaScript (JSON) adalah format berbasis teks standar untuk merepresentasikan data terstruktur berdasarkan sintaks objek JavaScript. Ini biasanya digunakan untuk mentransmisikan data dalam aplikasi web (mis. g. , mengirimkan beberapa data dari server ke client, sehingga dapat ditampilkan di halaman web, atau sebaliknya). Anda akan sering menemukannya, jadi dalam artikel ini, kami memberikan semua yang Anda butuhkan untuk bekerja dengan JSON menggunakan JavaScript, termasuk mem-parsing JSON sehingga Anda dapat mengakses data di dalamnya, dan membuat JSON Show JSON adalah format data berbasis teks yang mengikuti sintaks objek JavaScript, yang dipopulerkan oleh Douglas Crockford. Meskipun sangat mirip dengan sintaks literal objek JavaScript, ini dapat digunakan secara terpisah dari JavaScript, dan banyak lingkungan pemrograman memiliki kemampuan untuk membaca (mengurai) dan menghasilkan JSON JSON ada sebagai string — berguna saat Anda ingin mengirimkan data melalui jaringan. Perlu dikonversi ke objek JavaScript asli saat Anda ingin mengakses data. Ini bukan masalah besar — JavaScript menyediakan objek JSON global yang memiliki metode yang tersedia untuk mengonversi keduanya Catatan. Mengubah string menjadi objek asli disebut deserialization, sementara mengubah objek asli menjadi string sehingga dapat ditransmisikan melalui jaringan disebut serialisasi String JSON dapat disimpan dalam filenya sendiri, yang pada dasarnya hanyalah file teks dengan ekstensi 1, dan tipe MIME 2Seperti dijelaskan di atas, JSON adalah string yang formatnya sangat mirip dengan format literal objek JavaScript. Anda dapat menyertakan tipe data dasar yang sama di dalam JSON seperti yang Anda bisa dalam objek JavaScript standar — string, angka, larik, boolean, dan literal objek lainnya. Ini memungkinkan Anda untuk membuat hierarki data, seperti itu
Jika kita memuat string ini ke dalam program JavaScript dan menguraikannya ke dalam variabel yang disebut 3 misalnya, kita kemudian dapat mengakses data di dalamnya menggunakan notasi titik/braket yang sama seperti yang kita lihat di artikel dasar-dasar objek JavaScript. Sebagai contoh
Untuk mengakses data lebih jauh di hierarki, Anda harus menggabungkan nama properti dan indeks array yang diperlukan. Misalnya, untuk mengakses kekuatan super ketiga dari pahlawan kedua yang tercantum dalam daftar anggota, Anda akan melakukannya
Catatan. Kami telah membuat JSON yang terlihat di atas tersedia di dalam variabel di JSONTest kami. contoh html (lihat kode sumber). Coba muat ini dan kemudian akses data di dalam variabel melalui konsol JavaScript browser Anda Di atas kami menyebutkan bahwa teks JSON pada dasarnya terlihat seperti objek JavaScript di dalam sebuah string. Kami juga dapat mengonversi array ke/dari JSON. Di bawah ini juga JSON yang valid, misalnya
Di atas adalah JSON yang benar-benar valid. Anda hanya perlu mengakses item array (dalam versi parsingnya) dengan memulai dengan indeks array, misalnya 3
Jadi, mari kita lihat sebuah contoh untuk menunjukkan bagaimana kita bisa menggunakan beberapa data berformat JSON di situs web Pertama-tama, buat salinan lokal dari pahlawan kita. html dan gaya. file css. Yang terakhir berisi beberapa CSS sederhana untuk menata halaman kita, sedangkan yang pertama berisi beberapa body HTML yang sangat sederhana, ditambah elemen 4 untuk memuat kode JavaScript yang akan kita tulis dalam latihan ini
Kami telah membuat data JSON kami tersedia di GitHub kami, di https. // mdn. github. io/learning-area/javascript/oojs/json/superheroes. json Kami akan memuat JSON ke dalam skrip kami, dan menggunakan beberapa manipulasi DOM yang bagus untuk menampilkannya, seperti ini Fungsi tingkat atas terlihat seperti ini
Untuk mendapatkan JSON, kami menggunakan API yang disebut Fetch. API ini memungkinkan kami membuat permintaan jaringan untuk mengambil sumber daya dari server melalui JavaScript (mis. g. gambar, teks, JSON, bahkan cuplikan HTML), artinya kita dapat memperbarui sebagian kecil konten tanpa harus memuat ulang seluruh halaman Dalam fungsi kita, empat baris pertama menggunakan Fetch API untuk mengambil JSON dari server
Catatan. _7 API asinkron. Kita akan belajar banyak tentang fungsi asinkron di modul berikutnya, tetapi untuk saat ini, kita hanya akan mengatakan bahwa kita perlu menambahkan kata kunci 2 sebelum nama fungsi yang menggunakan API pengambilan, dan menambahkan kata kunci 3 sebelum Setelah semua itu, variabel _3 akan berisi objek JavaScript berdasarkan JSON. Kami kemudian meneruskan objek itu ke dua pemanggilan fungsi — yang pertama mengisi 5 dengan data yang benar, sedangkan yang kedua membuat kartu informasi untuk setiap pahlawan dalam tim, dan memasukkannya ke dalam 6Sekarang setelah kita mengambil data JSON dan mengubahnya menjadi objek JavaScript, mari kita manfaatkan dengan menulis dua fungsi yang kita rujuk di atas. Pertama-tama, tambahkan definisi fungsi berikut di bawah kode sebelumnya
Di sini pertama-tama kita membuat elemen _7 dengan 8, atur 9 agar sama dengan properti 0 dari objek, lalu tambahkan ke header menggunakan 1. Kami kemudian melakukan operasi yang sangat mirip dengan sebuah paragraf. buat itu, atur konten teksnya dan tambahkan ke header. Satu-satunya perbedaan adalah bahwa teksnya disetel ke templat literal yang berisi properti 2 dan 3 dari objekSelanjutnya, tambahkan fungsi berikut di bagian bawah kode, yang membuat dan menampilkan kartu pahlawan super
Untuk memulainya, kami menyimpan properti _5 dari objek JavaScript dalam variabel baru. Larik ini berisi banyak objek yang berisi informasi untuk setiap pahlawanSelanjutnya, kami menggunakan untuk mengulang setiap objek dalam array. Untuk masing-masing, kami
Catatan. Jika Anda mengalami kesulitan membuat contoh berfungsi, coba lihat hero-finished kami. kode sumber html (lihat juga berjalan langsung. ) Catatan. Jika Anda kesulitan mengikuti notasi titik/bracket yang kami gunakan untuk mengakses objek JavaScript, ada baiknya memiliki pahlawan super. file json buka di tab lain atau editor teks Anda, dan rujuk ke sana saat Anda melihat JavaScript kami. Anda juga harus merujuk kembali ke artikel dasar-dasar objek JavaScript kami untuk informasi selengkapnya tentang notasi titik dan tanda kurung Terakhir, kita perlu memanggil fungsi ________32______8 tingkat atas kita
Contoh di atas sederhana dalam hal mengakses objek JavaScript, karena kami mengonversi respons jaringan secara langsung menjadi objek JavaScript menggunakan 9Namun terkadang kami tidak seberuntung itu — terkadang kami menerima string JSON mentah, dan kami perlu mengonversinya sendiri menjadi objek. Dan saat kita ingin mengirim objek JavaScript melalui jaringan, kita perlu mengonversinya menjadi JSON (sebuah string) sebelum mengirimkannya. Untungnya, kedua masalah ini sangat umum dalam pengembangan web sehingga objek JSON bawaan tersedia di browser, yang berisi dua metode berikut
Anda dapat melihat yang pertama beraksi di heroes-finished-json-parse kami. html (lihat kode sumber) — ini melakukan hal yang persis sama dengan contoh yang kita buat sebelumnya, kecuali itu
Cuplikan kode utama ada di sini
Seperti yang Anda duga, _1 bekerja sebaliknya. Coba masukkan baris berikut ke konsol JavaScript browser Anda satu per satu untuk melihatnya beraksi 0Di sini kita membuat objek JavaScript, lalu memeriksa isinya, lalu mengonversinya menjadi string JSON menggunakan 1 — menyimpan nilai pengembalian dalam variabel baru — lalu memeriksanya lagiAnda telah mencapai bagian akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? . JSON Pada artikel ini, kami telah memberi Anda panduan sederhana untuk menggunakan JSON dalam program Anda, termasuk cara membuat dan mengurai JSON, dan cara mengakses data yang terkunci di dalamnya. Di artikel selanjutnya, kita akan mulai melihat JavaScript berorientasi objek Bisakah JSON digunakan dalam HTML?JSON dapat dengan mudah diterjemahkan ke dalam JavaScript . JavaScript dapat digunakan untuk membuat HTML di halaman web Anda.
Bagaimana cara menambahkan tautan JSON dalam HTML?Tambahkan tag dengan href dan target="_black" untuk membuka tautan di tab baru dan gunakan split untuk menghapus href dari json. .
Bagaimana cara mendapatkan nilai dari objek JSON di HTML?Konversikan data JSON menjadi objek JSON dengan menggunakan JSON. mengurai() metode. String JSON sekarang diubah menjadi objek JSON. Dapatkan nilai dari objek JSON dengan menggunakan notasi titik .
Bagaimana cara menampilkan data JSON di browser saya?Langkah-langkah untuk membuka file JSON di browser Web (Chrome, Mozilla) . Buka toko Web di browser web Anda menggunakan menu opsi aplikasi atau langsung menggunakan tautan ini Di sini, ketik Tampilan JSON di bilah pencarian di bawah kategori Ekstensi Anda akan mendapatkan berbagai ekstensi yang mirip dengan Tampilan JSON untuk membuka file format JSON |