Cara menggunakan gabungan json javascript

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

superHeroes.homeTown
superHeroes['active']

Seperti 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']

superHeroes.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]

1. Pertama, kita memiliki nama variabel —

   superHeroes.homeTown
   superHeroes['active']
   

   3
2. Di dalamnya, kami ingin mengakses properti

   superHeroes.homeTown
   superHeroes['active']
   

   _5, jadi kami menggunakan

   superHeroes.homeTown
   superHeroes['active']
   

   6

3. 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
4. Di dalam objek ini, kami ingin mengakses properti

   superHeroes.homeTown
   superHeroes['active']
   

   9, jadi kami menggunakan

   superHeroes['members'][1]['powers'][2]
   

   0
5. 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]

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

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

[
  {
    "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": "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"
    ]
  }
]

Setelah semua itu, variabel

superHeroes.homeTown
superHeroes['active']

[
  {
    "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": "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"
    ]
  }
]

Sekarang 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"
    ]
  }
]

[
  {
    "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": "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"
    ]
  }
]

<header>

</header>

<section>

</section>

<script>

</script>

<header>

</header>

<section>

</section>

<script>

</script>

<header>

</header>

<section>

</section>

<script>

</script>

<header>

</header>

<section>

</section>

<script>

</script>

Selanjutnya, 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']

Selanjutnya, kami menggunakan untuk mengulang setiap objek dalam array. Untuk masing-masing, kami

1. 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
2. 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
3. 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 garis bertuliskan "Kekuatan super. " untuk memperkenalkan informasi dalam daftar
4. 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
5. 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
6. 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);
}

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

• 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. 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);
  }
}

superHeroes.homeTown
superHeroes['active']

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

Anda 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