Làm cách nào để lưu trữ dữ liệu biểu mẫu HTML trong đối tượng JSON?

JSON là định dạng dữ liệu dựa trên văn bản theo cú pháp đối tượng JavaScript, được phổ biến bởi Douglas Crockford. Mặc dù nó gần giống với cú pháp theo nghĩa đen của đối tượng JavaScript, nhưng nó có thể được sử dụng độc lập với JavaScript và nhiều môi trường lập trình có khả năng đọc (phân tích cú pháp) và tạo JSON

JSON tồn tại dưới dạng một chuỗi — hữu ích khi bạn muốn truyền dữ liệu qua mạng. Nó cần được chuyển đổi thành một đối tượng JavaScript gốc khi bạn muốn truy cập dữ liệu. Đây không phải là vấn đề lớn — JavaScript cung cấp một đối tượng JSON toàn cầu có sẵn các phương thức để chuyển đổi giữa hai đối tượng

Ghi chú. Chuyển đổi một chuỗi thành một đối tượng gốc được gọi là giải tuần tự hóa, trong khi chuyển đổi một đối tượng gốc thành một chuỗi để nó có thể được truyền qua mạng được gọi là tuần tự hóa

Một chuỗi JSON có thể được lưu trữ trong tệp riêng của nó, về cơ bản chỉ là một tệp văn bản có phần mở rộng là

superHeroes.homeTown
superHeroes['active']

superHeroes.homeTown
superHeroes['active']

Như đã mô tả ở trên, JSON là một chuỗi có định dạng rất giống với định dạng chữ của đối tượng JavaScript. Bạn có thể bao gồm các loại dữ liệu cơ bản giống nhau bên trong JSON như bạn có thể làm trong một đối tượng JavaScript tiêu chuẩn — chuỗi, số, mảng, booleans và các ký tự đối tượng khác. Điều này cho phép bạn xây dựng một hệ thống phân cấp dữ liệu, như vậy

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

Nếu chúng ta tải chuỗi này vào một chương trình JavaScript và phân tích nó thành một biến có tên là

superHeroes.homeTown
superHeroes['active']

superHeroes.homeTown
superHeroes['active']

Để truy cập dữ liệu sâu hơn trong hệ thống phân cấp, bạn phải xâu chuỗi các tên thuộc tính bắt buộc và các chỉ mục mảng lại với nhau. Ví dụ: để truy cập siêu năng lực thứ ba của anh hùng thứ hai được liệt kê trong danh sách thành viên, bạn sẽ làm điều này

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

1. Đầu tiên, chúng ta có tên biến —

   superHeroes.homeTown
   superHeroes['active']
   

   3
2. Bên trong đó, chúng tôi muốn truy cập thuộc tính

   superHeroes.homeTown
   superHeroes['active']
   

   5, vì vậy chúng tôi sử dụng

   superHeroes.homeTown
   superHeroes['active']
   

   6

3. superHeroes.homeTown
   superHeroes['active']
   

   5 chứa một mảng được tạo bởi các đối tượng. Chúng tôi muốn truy cập đối tượng thứ hai bên trong mảng, vì vậy chúng tôi sử dụng

   superHeroes.homeTown
   superHeroes['active']
   

   8
4. Bên trong đối tượng này, chúng tôi muốn truy cập thuộc tính

   superHeroes.homeTown
   superHeroes['active']
   

   9, vì vậy chúng tôi sử dụng

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

   0
5. Bên trong thuộc tính

   superHeroes.homeTown
   superHeroes['active']
   

   9 là một mảng chứa siêu năng lực của anh hùng được chọn. Chúng tôi muốn cái thứ ba, vì vậy chúng tôi sử dụng

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

   2

Ghi chú. Chúng tôi đã cung cấp JSON được thấy ở trên bên trong một biến trong JSONTest của chúng tôi. ví dụ html (xem mã nguồn). Hãy thử tải cái này lên và sau đó truy cập dữ liệu bên trong biến thông qua bảng điều khiển JavaScript của trình duyệt của bạn

Ở trên, chúng tôi đã đề cập rằng văn bản JSON về cơ bản trông giống như một đối tượng JavaScript bên trong một chuỗi. Chúng ta cũng có thể chuyển đổi mảng thành/từ JSON. Ví dụ, bên dưới cũng là JSON hợp lệ

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

Ở trên là JSON hoàn toàn hợp lệ. Bạn chỉ cần truy cập các mục mảng (trong phiên bản được phân tích cú pháp của nó) bằng cách bắt đầu với một chỉ mục mảng, ví dụ:

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

• JSON hoàn toàn là một chuỗi có định dạng dữ liệu được chỉ định — nó chỉ chứa các thuộc tính, không có phương thức
• JSON yêu cầu sử dụng dấu ngoặc kép quanh chuỗi và tên thuộc tính. Các trích dẫn đơn không hợp lệ ngoài việc bao quanh toàn bộ chuỗi JSON
• Ngay cả một dấu phẩy hoặc dấu hai chấm đặt sai vị trí cũng có thể khiến tệp JSON bị lỗi và không hoạt động. Bạn nên cẩn thận để xác thực bất kỳ dữ liệu nào bạn đang cố sử dụng (mặc dù JSON do máy tính tạo ít có khả năng bao gồm lỗi, miễn là chương trình tạo hoạt động chính xác). Bạn có thể xác thực JSON bằng một ứng dụng như JSONLint
• JSON thực sự có thể ở dạng bất kỳ loại dữ liệu nào hợp lệ để đưa vào bên trong JSON, không chỉ mảng hoặc đối tượng. Vì vậy, ví dụ: một chuỗi hoặc số sẽ là JSON hợp lệ
• Không giống như trong mã JavaScript, trong đó các thuộc tính đối tượng có thể không được trích dẫn, trong JSON, chỉ các chuỗi được trích dẫn mới có thể được sử dụng làm thuộc tính

Vì vậy, hãy làm việc thông qua một ví dụ để cho thấy cách chúng ta có thể sử dụng một số dữ liệu được định dạng JSON trên một trang web

Để bắt đầu, hãy tạo các bản sao cục bộ của các anh hùng của chúng tôi. html và phong cách. tập tin css. Phần sau chứa một số CSS đơn giản để định kiểu trang của chúng ta, trong khi phần trước chứa một số HTML nội dung rất đơn giản, cộng với phần tử

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

<header>

header>

<section>

section>

<script>

script>

Chúng tôi đã cung cấp dữ liệu JSON trên GitHub của mình, tại https. //mdn. github. io/learning-area/javascript/oojs/json/siêu anh hùng. json

Chúng tôi sẽ tải JSON vào tập lệnh của mình và sử dụng một số thao tác DOM tiện lợi để hiển thị nó, như thế này

Chức năng cấp cao nhất trông như thế này

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

}

Để có được JSON, chúng tôi sử dụng API có tên là Fetch. API này cho phép chúng tôi thực hiện các yêu cầu mạng để truy xuất tài nguyên từ máy chủ thông qua JavaScript (e. g. hình ảnh, văn bản, JSON, thậm chí cả đoạn mã HTML), nghĩa là chúng tôi có thể cập nhật các phần nội dung nhỏ mà không phải tải lại toàn bộ trang

Trong chức năng của chúng tôi, bốn dòng đầu tiên sử dụng Fetch API để tìm nạp JSON từ máy chủ

• chúng tôi khai báo biến

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

  5 để lưu trữ URL GitHub
• chúng tôi sử dụng URL để khởi tạo một đối tượng

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

  6 mới
• chúng tôi thực hiện yêu cầu mạng bằng cách sử dụng hàm

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

  7 và điều này trả về một đối tượng

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

  8
• chúng tôi truy xuất phản hồi dưới dạng JSON bằng cách sử dụng hàm

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

  9 của đối tượng

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

  8

Ghi chú. API

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

Sau tất cả, biến

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

Bây giờ chúng tôi đã truy xuất dữ liệu JSON và chuyển đổi nó thành một đối tượng JavaScript, hãy tận dụng nó bằng cách viết hai hàm mà chúng tôi đã tham chiếu ở trên. Trước hết, hãy thêm định nghĩa hàm sau vào bên dưới đoạn mã trước

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

Ở đây, trước tiên, chúng tôi tạo một phần tử

[
  {
    "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>

Tiếp theo, thêm chức năng sau vào cuối mã để tạo và hiển thị các thẻ siêu anh hùng

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

Để bắt đầu, chúng tôi lưu trữ thuộc tính

superHeroes.homeTown
superHeroes['active']

Tiếp theo, chúng ta sử dụng a để lặp qua từng đối tượng trong mảng. Đối với mỗi người, chúng tôi

1. Tạo một số yếu tố mới. một

   <header>
   
   header>
   
   <section>
   
   section>
   
   <script>
   
   script>
   

   5, một

   <header>
   
   header>
   
   <section>
   
   section>
   
   <script>
   
   script>
   

   6, ba

   <header>
   
   header>
   
   <section>
   
   section>
   
   <script>
   
   script>
   

   7 và một

   <header>
   
   header>
   
   <section>
   
   section>
   
   <script>
   
   script>
   

   8
2. Đặt

   <header>
   
   header>
   
   <section>
   
   section>
   
   <script>
   
   script>
   

   6 để chứa

   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 của anh hùng hiện tại
3. Điền vào ba đoạn văn với

   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 của họ, và một dòng có nội dung "Siêu năng lực. " để giới thiệu thông tin trong danh sách
4. Lưu trữ thuộc tính

   superHeroes.homeTown
   superHeroes['active']
   

   9 trong một hằng số mới khác có tên là

   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 — hằng số này chứa một mảng liệt kê các siêu năng lực của anh hùng hiện tại
5. Sử dụng một vòng lặp

   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 khác để lặp qua siêu năng lực của anh hùng hiện tại — đối với mỗi vòng lặp, chúng ta tạo một phần tử

   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, đặt siêu năng lực vào bên trong nó, sau đó đặt

   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 bên trong phần tử

   <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) bằng cách sử dụng

   <header>
   
   header>
   
   <section>
   
   section>
   
   <script>
   
   script>
   

   1
6. Điều cuối cùng chúng ta làm là nối các

   <header>
   
   header>
   
   <section>
   
   section>
   
   <script>
   
   script>
   

   6,

   <header>
   
   header>
   
   <section>
   
   section>
   
   <script>
   
   script>
   

   7 và

   <header>
   
   header>
   
   <section>
   
   section>
   
   <script>
   
   script>
   

   8 vào bên trong

   <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), sau đó nối thêm

   <header>
   
   header>
   
   <section>
   
   section>
   
   <script>
   
   script>
   

   5 vào bên trong

   [
     {
       "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. Thứ tự các thứ được thêm vào rất quan trọng, vì đây là thứ tự chúng sẽ được hiển thị bên trong HTML

Ghi chú. Nếu bạn gặp khó khăn trong việc làm cho ví dụ hoạt động, hãy thử tham khảo các anh hùng đã hoàn thành của chúng tôi. mã nguồn html (cũng thấy nó chạy trực tiếp. )

Ghi chú. Nếu bạn gặp sự cố khi tuân theo ký hiệu dấu chấm/dấu ngoặc vuông mà chúng tôi đang sử dụng để truy cập đối tượng JavaScript, thì việc có các siêu anh hùng có thể hữu ích. json mở trong tab khác hoặc trình soạn thảo văn bản của bạn và tham khảo nó khi bạn xem JavaScript của chúng tôi. Bạn cũng nên tham khảo lại bài viết cơ bản về đối tượng JavaScript của chúng tôi để biết thêm thông tin về ký hiệu dấu chấm và dấu ngoặc

Cuối cùng, chúng ta cần gọi hàm

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

populate();

Ví dụ trên rất đơn giản về mặt truy cập đối tượng JavaScript, bởi vì chúng tôi đã chuyển đổi trực tiếp phản hồi của mạng thành đối tượng JavaScript bằng cách sử dụng

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

Nhưng đôi khi chúng tôi không may mắn như vậy — đôi khi chúng tôi nhận được một chuỗi JSON thô và chúng tôi cần tự chuyển đổi nó thành một đối tượng. Và khi chúng tôi muốn gửi một đối tượng JavaScript trên mạng, chúng tôi cần chuyển đổi nó thành JSON (một chuỗi) trước khi gửi nó. May mắn thay, hai vấn đề này rất phổ biến trong quá trình phát triển web nên có sẵn một đối tượng JSON tích hợp sẵn trong trình duyệt, chứa hai phương thức sau

• 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. Chấp nhận một chuỗi JSON làm tham số và trả về đối tượng JavaScript tương ứng

• 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. Chấp nhận một đối tượng làm tham số và trả về chuỗi JSON tương đương

Bạn có thể thấy cái đầu tiên đang hoạt động trong Heroes-finished-json-parse của chúng tôi. html (xem mã nguồn) — điều này thực hiện chính xác như ví dụ mà chúng tôi đã xây dựng trước đó, ngoại trừ điều đó

• chúng tôi truy xuất phản hồi dưới dạng văn bản thay vì JSON, bằng cách gọi phương thức

  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 của phản hồi
• sau đó chúng tôi sử dụng

  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 để chuyển đổi văn bản thành đối tượng JavaScript

Đoạn mã chính ở đây

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

}

Như bạn có thể đoán,

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

Ở đây chúng ta đang tạo một đối tượng JavaScript, sau đó kiểm tra xem nó chứa gì, sau đó chuyển đổi nó thành một chuỗi JSON bằng cách sử dụng

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

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . JSON

Trong bài viết này, chúng tôi đã cung cấp cho bạn hướng dẫn đơn giản về cách sử dụng JSON trong chương trình của bạn, bao gồm cách tạo và phân tích cú pháp JSON cũng như cách truy cập dữ liệu bị khóa bên trong nó. Trong bài viết tiếp theo, chúng ta sẽ bắt đầu xem xét JavaScript hướng đối tượng

Làm cách nào để chuyển đổi dữ liệu biểu mẫu HTML sang đối tượng JSON?

Làm cách nào để gửi dữ liệu biểu mẫu HTML dưới dạng JSON?

Làm cách nào để lưu dữ liệu biểu mẫu ở định dạng JSON?

Làm cách nào để chuyển đổi dữ liệu biểu mẫu thành đối tượng JSON?