Konversikan HTML ke JSON. Dapat juga (dengan cerdas) mengonversi tabel HTML ke JSON (menggunakan header tabel (jika tersedia) sebagai kunci dalam JSON yang dihasilkan)
html json html-converter html-tabel hacktoberfest html2json html-ke-json html-tabel-ke-json
- Diperbarui 20 April 2021
- HTML
chuanconggao / html2json
Bintang 21
- Kode
- Masalah
- Tarik permintaan
Pustaka ringan yang mengonversi halaman web HTML menjadi data JSON menggunakan template yang ditentukan di JSON
htmljson html2json
- Diperbarui 30 September 2020
- Piton
KebenaranHun / html2json
Bintang 5
- Kode
- Masalah
- Tarik permintaan
Pergi pengembangan bahasa konversi HTML dan Markdown ke alat JSON, konversi konten HTML dan Markdown untuk memenuhi berbagai program kecil Rendering konten komponen `rich-text` memerlukan format ``JSON''
program mini teks kaya html2json
- Diperbarui 16 Mei 2022
- HTML
imingyu / pemaaf-xml-parser
Bintang 4
- Kode
- Masalah
- Tarik permintaan
Pengurai XML/HTML dan serializer untuk JavaScript
javascript html parser json TypeScript serializer xml xml-parsing html-parser xml2json html-parsing xml-parser transformasi xml2js html2js html2json pemaaf-xml-parser
- Diperbarui 9 April 2021
- TypeScript
moinisme / jsonfromhtml
Bintang 3
- Kode
- Masalah
- Tarik permintaan
Paket NPM untuk mengonversi HTML ke JSON
javascript html npm json simpul html2json
- Diperbarui 26 April 2020
- JavaScript
CorlyDream / html2obj
Bintang 3
- Kode
- Masalah
- Tarik permintaan
纯 js 解析 html, objek transkripsi html, objek transliterasi html, 抽取电视
parse cepat murni-javascript json2html html2json htmlparser
- Diperbarui 6 Januari 2023
- HTML
bukaSYSTEM4ALL / HTML2JSON
Bintang 2
- Kode
- Masalah
- Tarik permintaan
Cara cerdas untuk mengambil konten HTML ke JSON dengan pemrosesan bahasa alami
natural-language-processing json-data kontenful html-parser json-generator html-convert html2json halaman web2json contentful-entries
- Diperbarui 4 April 2017
- JavaScript
kevinhermawan / markup2json
Sponsor
Bintang 2
- Kode
- Masalah
- Tarik permintaan
Pustaka untuk mengubah HTML dan XML menjadi JSON
javascript naskah html-parser xml2json xml-parser html2json xml-ke-json html-ke-json
- Diperbarui 30 Januari 2023
- TypeScript
AkashRajpurohit / html2json
Bintang 2
- Kode
- Masalah
- Tarik permintaan
Menggores situs web langsung dan mengubahnya menjadi format JSON
html2json
- Diperbarui 9 Des 2022
- JavaScript
scalastic / aws-dokumentasi-scraper
Bintang 1
- Kode
- Masalah
- Tarik permintaan
Scraper situs web dokumentasi AWS yang menjalankan 2 level dan mengekspor dokumentasi ke dalam file JSON. ID yang berbeda juga dihasilkan pada data larik untuk menangani beberapa komponen UI HTML yang akan mengurai data JSON yang dihasilkan
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
Prasyarat. Literasi komputer dasar, pemahaman dasar tentang HTML dan CSS, keakraban dengan dasar-dasar JavaScript (lihat Langkah pertama dan Blok penyusun) dan dasar-dasar OOJS (lihat Pengenalan objek). Objektif. Untuk memahami cara bekerja dengan data yang disimpan di JSON, dan membuat string JSON Anda sendiri
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
superHeroes.homeTown
superHeroes['active']
1, dan tipe MIME superHeroes.homeTown
superHeroes['active']
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
{
"squadName": "Super hero squad",
"homeTown": "Metro City",
"formed": 2016,
"secretBase": "Super tower",
"active": true,
"members": [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name": "Eternal Flame",
"age": 1000000,
"secretIdentity": "Unknown",
"powers": [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
}
Jika kita memuat string ini ke dalam program JavaScript dan menguraikannya ke dalam variabel yang disebut
superHeroes.homeTown
superHeroes['active']
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 contohsuperHeroes.homeTown
superHeroes['active']
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
superHeroes['members'][1]['powers'][2]
- Pertama, kita memiliki nama variabel —
superHeroes.homeTown
superHeroes['active']
3 - Di dalamnya, kami ingin mengakses properti
superHeroes.homeTown
superHeroes['active']
_5, jadi kami menggunakan superHeroes.homeTown
superHeroes['active']
6 superHeroes.homeTown
superHeroes['active']
5 berisi larik yang diisi oleh objek. Kami ingin mengakses objek kedua di dalam array, jadi kami menggunakan superHeroes.homeTown
superHeroes['active']
8- Di dalam objek ini, kami ingin mengakses properti
superHeroes.homeTown
superHeroes['active']
9, jadi kami menggunakan superHeroes['members'][1]['powers'][2]
0 - Di dalam properti
superHeroes.homeTown
superHeroes['active']
_9 terdapat larik yang berisi kekuatan super pahlawan yang dipilih. Kami ingin yang ketiga, jadi kami menggunakan superHeroes['members'][1]['powers'][2]
2
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
[
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
}
]
Di atas adalah JSON yang benar-benar valid. Anda hanya perlu mengakses item array (dalam versi parsingnya) dengan memulai dengan indeks array, misalnya
superHeroes['members'][1]['powers'][2]
3- JSON murni string dengan format data tertentu — hanya berisi properti, tanpa metode
- JSON membutuhkan tanda kutip ganda untuk digunakan di sekitar string dan nama properti. Kutipan tunggal tidak valid selain mengelilingi seluruh string JSON
- Bahkan satu koma atau titik dua yang salah tempat dapat menyebabkan file JSON salah, dan tidak berfungsi. Anda harus berhati-hati untuk memvalidasi data apa pun yang Anda coba gunakan (walaupun JSON yang dihasilkan komputer cenderung tidak menyertakan kesalahan, selama program generator bekerja dengan benar). Anda dapat memvalidasi JSON menggunakan aplikasi seperti JSONLint
- JSON sebenarnya dapat berupa tipe data apa pun yang valid untuk dimasukkan ke dalam JSON, bukan hanya array atau objek. Jadi misalnya, satu string atau angka akan menjadi JSON yang valid
- Tidak seperti dalam kode JavaScript di mana properti objek dapat diberi tanda kutip, di JSON hanya string yang dikutip yang dapat digunakan sebagai properti
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
superHeroes['members'][1]['powers'][2]
4 untuk memuat kode JavaScript yang akan kita tulis dalam latihan ini<header>
header>
<section>
section>
<script>
script>
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
async function populate() {
const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
const request = new Request(requestURL);
const response = await fetch(request);
const superHeroes = await response.json();
populateHeader(superHeroes);
populateHeroes(superHeroes);
}
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
- kami mendeklarasikan variabel
superHeroes['members'][1]['powers'][2]
_5 untuk menyimpan URL GitHub - kami menggunakan URL untuk menginisialisasi objek
superHeroes['members'][1]['powers'][2]
_6 baru - kami membuat permintaan jaringan menggunakan fungsi
superHeroes['members'][1]['powers'][2]
_7, dan ini mengembalikan objek superHeroes['members'][1]['powers'][2]
8 - kami mengambil respons sebagai JSON menggunakan fungsi
superHeroes['members'][1]['powers'][2]
9 dari objek superHeroes['members'][1]['powers'][2]
8
Catatan.
superHeroes['members'][1]['powers'][2]
_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 [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
}
]
2 sebelum nama fungsi yang menggunakan API pengambilan, dan menambahkan kata kunci [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
}
]
3 sebelum panggilan ke fungsi asinkron apa punSetelah semua itu, variabel
superHeroes.homeTown
superHeroes['active']
_3 akan berisi objek JavaScript berdasarkan JSON. Kami kemudian meneruskan objek itu ke dua pemanggilan fungsi — yang pertama mengisi [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
}
]
5 dengan data yang benar, sedangkan yang kedua membuat kartu informasi untuk setiap pahlawan dalam tim, dan memasukkannya ke dalam [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
}
]
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
function populateHeader(obj) {
const header = document.querySelector('header');
const myH1 = document.createElement('h1');
myH1.textContent = obj.squadName;
header.appendChild(myH1);
const myPara = document.createElement('p');
myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;
header.appendChild(myPara);
}
Di sini pertama-tama kita membuat elemen
[
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
}
]
_7 dengan [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
}
]
8, atur [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
}
]
9 agar sama dengan properti <header>
header>
<section>
section>
<script>
script>
0 dari objek, lalu tambahkan ke header menggunakan <header>
header>
<section>
section>
<script>
script>
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 <header>
header>
<section>
section>
<script>
script>
2 dan <header>
header>
<section>
section>
<script>
script>
3 dari objekSelanjutnya, tambahkan fungsi berikut di bagian bawah kode, yang membuat dan menampilkan kartu pahlawan super
function populateHeroes(obj) {
const section = document.querySelector('section');
const heroes = obj.members;
for (const hero of heroes) {
const myArticle = document.createElement('article');
const myH2 = document.createElement('h2');
const myPara1 = document.createElement('p');
const myPara2 = document.createElement('p');
const myPara3 = document.createElement('p');
const myList = document.createElement('ul');
myH2.textContent = hero.name;
myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
myPara2.textContent = `Age: ${hero.age}`;
myPara3.textContent = 'Superpowers:';
const superPowers = hero.powers;
for (const power of superPowers) {
const listItem = document.createElement('li');
listItem.textContent = power;
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
Untuk memulainya, kami menyimpan properti
superHeroes.homeTown
superHeroes['active']
_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
- Buat beberapa elemen baru. sebuah
<header>
header>
<section>
section>
<script>
script>
_5, sebuah <header>
header>
<section>
section>
<script>
script>
6, tiga <header>
header>
<section>
section>
<script>
script>
7s, dan sebuah <header>
header>
<section>
section>
<script>
script>
8 - Setel
<header>
header>
<section>
section>
<script>
script>
_6 untuk menampung async function populate() {
const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
const request = new Request(requestURL);
const response = await fetch(request);
const superHeroes = await response.json();
populateHeader(superHeroes);
populateHeroes(superHeroes);
}
0 pahlawan saat ini - Isi tiga paragraf dengan
async function populate() {
const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
const request = new Request(requestURL);
const response = await fetch(request);
const superHeroes = await response.json();
populateHeader(superHeroes);
populateHeroes(superHeroes);
}
_1, async function populate() {
const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
const request = new Request(requestURL);
const response = await fetch(request);
const superHeroes = await response.json();
populateHeader(superHeroes);
populateHeroes(superHeroes);
}
2, dan baris bertuliskan "Kekuatan super. " untuk memperkenalkan informasi dalam daftar - Simpan properti
superHeroes.homeTown
superHeroes['active']
_9 di konstanta baru lainnya bernama async function populate() {
const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
const request = new Request(requestURL);
const response = await fetch(request);
const superHeroes = await response.json();
populateHeader(superHeroes);
populateHeroes(superHeroes);
}
4 — ini berisi larik yang mencantumkan kekuatan super pahlawan saat ini - Gunakan loop
async function populate() {
const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
const request = new Request(requestURL);
const response = await fetch(request);
const superHeroes = await response.json();
populateHeader(superHeroes);
populateHeroes(superHeroes);
}
_5 lainnya untuk mengulang melalui kekuatan super pahlawan saat ini — untuk masing-masing kita membuat elemen async function populate() {
const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
const request = new Request(requestURL);
const response = await fetch(request);
const superHeroes = await response.json();
populateHeader(superHeroes);
populateHeroes(superHeroes);
}
6, letakkan kekuatan super di dalamnya, lalu letakkan async function populate() {
const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
const request = new Request(requestURL);
const response = await fetch(request);
const superHeroes = await response.json();
populateHeader(superHeroes);
populateHeroes(superHeroes);
}
7 di dalam elemen <header>
header>
<section>
section>
<script>
script>
8 (async function populate() {
const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
const request = new Request(requestURL);
const response = await fetch(request);
const superHeroes = await response.json();
populateHeader(superHeroes);
populateHeroes(superHeroes);
}
9) menggunakan <header>
header>
<section>
section>
<script>
script>
1 - Hal terakhir yang kami lakukan adalah menambahkan
<header>
header>
<section>
section>
<script>
script>
6, <header>
header>
<section>
section>
<script>
script>
_7s, dan <header>
header>
<section>
section>
<script>
script>
8 di dalam <header>
header>
<section>
section>
<script>
script>
_5 (function populateHeader(obj) {
const header = document.querySelector('header');
const myH1 = document.createElement('h1');
myH1.textContent = obj.squadName;
header.appendChild(myH1);
const myPara = document.createElement('p');
myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;
header.appendChild(myPara);
}
5), lalu menambahkan <header>
header>
<section>
section>
<script>
script>
5 di dalam [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
}
]
6. Urutan hal-hal yang ditambahkan adalah penting, karena ini adalah urutan yang akan ditampilkan di dalam HTML
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
populate();
Contoh di atas sederhana dalam hal mengakses objek JavaScript, karena kami mengonversi respons jaringan secara langsung menjadi objek JavaScript menggunakan
function populateHeader(obj) {
const header = document.querySelector('header');
const myH1 = document.createElement('h1');
myH1.textContent = obj.squadName;
header.appendChild(myH1);
const myPara = document.createElement('p');
myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;
header.appendChild(myPara);
}
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
function populateHeroes(obj) {
const section = document.querySelector('section');
const heroes = obj.members;
for (const hero of heroes) {
const myArticle = document.createElement('article');
const myH2 = document.createElement('h2');
const myPara1 = document.createElement('p');
const myPara2 = document.createElement('p');
const myPara3 = document.createElement('p');
const myList = document.createElement('ul');
myH2.textContent = hero.name;
myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
myPara2.textContent = `Age: ${hero.age}`;
myPara3.textContent = 'Superpowers:';
const superPowers = hero.powers;
for (const power of superPowers) {
const listItem = document.createElement('li');
listItem.textContent = power;
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
_0. Menerima string JSON sebagai parameter, dan mengembalikan objek JavaScript yang sesuaifunction populateHeroes(obj) {
const section = document.querySelector('section');
const heroes = obj.members;
for (const hero of heroes) {
const myArticle = document.createElement('article');
const myH2 = document.createElement('h2');
const myPara1 = document.createElement('p');
const myPara2 = document.createElement('p');
const myPara3 = document.createElement('p');
const myList = document.createElement('ul');
myH2.textContent = hero.name;
myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
myPara2.textContent = `Age: ${hero.age}`;
myPara3.textContent = 'Superpowers:';
const superPowers = hero.powers;
for (const power of superPowers) {
const listItem = document.createElement('li');
listItem.textContent = power;
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
_1. Menerima objek sebagai parameter, dan mengembalikan string JSON yang setara
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
- kami mengambil respons sebagai teks daripada JSON, dengan memanggil metode respons
function populateHeroes(obj) {
const section = document.querySelector('section');
const heroes = obj.members;
for (const hero of heroes) {
const myArticle = document.createElement('article');
const myH2 = document.createElement('h2');
const myPara1 = document.createElement('p');
const myPara2 = document.createElement('p');
const myPara3 = document.createElement('p');
const myList = document.createElement('ul');
myH2.textContent = hero.name;
myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
myPara2.textContent = `Age: ${hero.age}`;
myPara3.textContent = 'Superpowers:';
const superPowers = hero.powers;
for (const power of superPowers) {
const listItem = document.createElement('li');
listItem.textContent = power;
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
2 - kami kemudian menggunakan
function populateHeroes(obj) {
const section = document.querySelector('section');
const heroes = obj.members;
for (const hero of heroes) {
const myArticle = document.createElement('article');
const myH2 = document.createElement('h2');
const myPara1 = document.createElement('p');
const myPara2 = document.createElement('p');
const myPara3 = document.createElement('p');
const myList = document.createElement('ul');
myH2.textContent = hero.name;
myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
myPara2.textContent = `Age: ${hero.age}`;
myPara3.textContent = 'Superpowers:';
const superPowers = hero.powers;
for (const power of superPowers) {
const listItem = document.createElement('li');
listItem.textContent = power;
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
_0 untuk mengonversi teks menjadi objek JavaScript
Cuplikan kode utama ada di sini
async function populate() {
const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
const request = new Request(requestURL);
const response = await fetch(request);
const superHeroesText = await response.text();
const superHeroes = JSON.parse(superHeroesText);
populateHeader(superHeroes);
populateHeroes(superHeroes);
}
Seperti yang Anda duga,
function populateHeroes(obj) {
const section = document.querySelector('section');
const heroes = obj.members;
for (const hero of heroes) {
const myArticle = document.createElement('article');
const myH2 = document.createElement('h2');
const myPara1 = document.createElement('p');
const myPara2 = document.createElement('p');
const myPara3 = document.createElement('p');
const myList = document.createElement('ul');
myH2.textContent = hero.name;
myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
myPara2.textContent = `Age: ${hero.age}`;
myPara3.textContent = 'Superpowers:';
const superPowers = hero.powers;
for (const power of superPowers) {
const listItem = document.createElement('li');
listItem.textContent = power;
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
_1 bekerja sebaliknya. Coba masukkan baris berikut ke konsol JavaScript browser Anda satu per satu untuk melihatnya beraksisuperHeroes.homeTown
superHeroes['active']
0Di sini kita membuat objek JavaScript, lalu memeriksa isinya, lalu mengonversinya menjadi string JSON menggunakan
function populateHeroes(obj) {
const section = document.querySelector('section');
const heroes = obj.members;
for (const hero of heroes) {
const myArticle = document.createElement('article');
const myH2 = document.createElement('h2');
const myPara1 = document.createElement('p');
const myPara2 = document.createElement('p');
const myPara3 = document.createElement('p');
const myList = document.createElement('ul');
myH2.textContent = hero.name;
myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
myPara2.textContent = `Age: ${hero.age}`;
myPara3.textContent = 'Superpowers:';
const superPowers = hero.powers;
for (const power of superPowers) {
const listItem = document.createElement('li');
listItem.textContent = power;
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
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
Apa itu JSON dan contohnya?
JSON atau Javascript Object Notation adalah standar terbuka berdasarkan teks ringan yang dapat dibaca manusia yang dirancang untuk menyimpan dan mentransfer data . JSON terdiri dari dua struktur, yaitu. Sekelompok nilai berpasangan. Di JSON contohnya adalah objek.
Apa itu file JSON?
JSON (JavaScript Object Notation) adalah format file berbasis teks yang umumnya digunakan dalam proses pertukaran data antara server dan klien . File JSON memiliki ekstensi. json serta menggunakan teks yang dapat dibaca oleh manusia dan dimengerti oleh komputer.
Apa gunanya JSON?
Fungsi JSON menghasilkan representasi JavaScript Object Notation (JSON) dari struktur data sebagai teks sehingga cocok untuk disimpan atau ditransmisikan ke seluruh jaringan . ECMA-404 dan IETF RFC 8259 menjelaskan format tersebut, yang banyak digunakan oleh JavaScript dan bahasa pemrograman lainnya. benar atau salah.
Apa itu XML dan JSON?
XML adalah meta-bahasa seperti tag HTML yang digunakan untuk mendeskripsikan data. sedangkan JSON adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat oleh komputer.