Hướng dẫn is json a valid javascript object? - json có phải là đối tượng javascript hợp lệ không?

Không, thực sự, JSON là gì?

JSON là một đị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 đố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) và tạo JSON.

JSON tồn tại dưới dạng chuỗi - hữu ích khi bạn muốn truyền dữ liệu trên mạng. Nó cần được chuyển đổi thành đối tượng JavaScript gốc khi bạn muốn truy cập dữ liệu. Đây không phải là một 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.

LƯU Ý: Chuyển đổi một chuỗi thành một đối tượng gốc được gọi là Deserialization, đồng thời 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. Converting a string to a native object is called deserialization, while converting a native object to a string so it can be transmitted across the network is called serialization.

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

superHeroes.homeTown
superHeroes['active']

superHeroes.homeTown
superHeroes['active']

Cấu trúc JSON

Như đã mô tả ở trên, JSON là một chuỗi có định dạng rất giống với định dạng theo nghĩa đen đố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ể trong một đối tượng JavaScript tiêu chuẩn - chuỗi, số, mảng, booleans và các chữ cái 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 tôi tải chuỗi này vào một chương trình JavaScript và phân tích cú pháp nó vào một biến có tên

superHeroes.homeTown
superHeroes['active']

superHeroes.homeTown
superHeroes['active']

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

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

1. Đầu tiên, chúng tôi có tên biến -

   superHeroes.homeTown
   superHeroes['active']
   

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

   superHeroes.homeTown
   superHeroes['active']
   

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

   superHeroes.homeTown
   superHeroes['active']
   

   8.

3. superHeroes.homeTown
   superHeroes['active']
   

   7 chứa một mảng được điền 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['members'][1]['powers'][2]
   

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

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

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

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

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

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

   1 là một mảng chứa siêu cường của anh hùng đã 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]
   

   4.

Lưu ý: Chúng tôi đã làm cho JSON thấy ở trên có sẵn bên trong một biến trong ví dụ jsontest.html của chúng tôi (xem mã nguồn). Hãy thử tải điều này 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. We've made the JSON seen above available inside a variable in our JSONTest.html example (see the source code). Try loading this up and then accessing data inside the variable via your browser's JavaScript console.

Mảng là JSON

Trên đây, 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 tôi cũng có thể chuyển đổi các mảng thành/từ JSON. Dưới đây cũng là JSON hợp lệ, ví dụ:

[
  {
    "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 đây 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 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]

Ghi chú khác

• 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 báo giá đôi được sử dụng xung quanh các chuỗi và tên tài sản. Các trích dẫn đơn không hợp lệ ngoài việc xung quanh toàn bộ chuỗi JSON.
• Ngay cả một dấu phẩy hoặc dấu chấm câu không đúng chỗ cũng có thể khiến một tệp JSON sai, 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ố gắng sử dụng (mặc dù JSON do máy tính tạo ra ít có khả năng bao gồm các lỗi, miễn là chương trình Trình tạo đang hoạt động chính xác). Bạn có thể xác thực JSON bằng cách sử dụng một ứng dụng như JsonLint.
• JSON thực sự có thể ở dạng của bất kỳ loại dữ liệu nào hợp lệ để đưa vào bên trong JSON, không chỉ các mảng hoặc đối tượng. Vì vậy, ví dụ, một chuỗi hoặc số duy nhất 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 xuất, trong JSON, chỉ các chuỗi được trích dẫn có thể được sử dụng làm thuộc tính.

Học tập tích cực: Làm việc thông qua một ví dụ JSON

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

Để bắt đầu, 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à style.css. Cái sau chứa một số CSS đơn giản để tạo kiểu cho trang của chúng tôi, trong khi cái trước chứa một số HTML cơ thể rất đơn giản, cộng với một yếu tố

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

<header>

header>

<section>

section>

<script>

script>

Chúng tôi đã cung cấp dữ liệu JSON của chúng tôi trên github của chúng tôi, tại https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

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

Hàm cấp cao nhất

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 gọi 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 (ví dụ: hình ảnh, văn bản, JSON, thậm chí là đoạn trích HTML), có nghĩa là chúng tôi có thể cập nhật các phần nhỏ của nội dung 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 API tìm nạp để tìm nạp JSON từ máy chủ:

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

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

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

  8 mới.
• Chúng tôi thực hiện yêu cầu mạng bằng hàm

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

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

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

  0
• Chúng tôi lấy lại phản hồi dưới dạng JSON bằng cách sử dụng hàm

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

  1 của đối tượng

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

  0.

Lưu ý: 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"
    ]
  }
]

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

Tạo thẻ thông tin anh hùng

Tiếp theo, thêm chức năng sau ở dưới cùng của 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 tôi sử dụng một ... vòng lặp để 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:

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

   7,

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

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

   9 và

   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.
2. Đặ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"
       ]
     }
   ]
   

   9 để 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);
   
   }
   

   2 của anh hùng hiện tại.
3. Điền vào ba đoạn văn bằng

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

   3,

   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 và một dòng nói rằng "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['members'][1]['powers'][2]
   

   1 trong một hằng số mới 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);
   
   }
   

   6 - điều này chứa một mảng liệt kê các siêu cường 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);
   
   }
   

   7 khác để lặp qua các siêu cường của anh hùng hiện tại - đối với mỗi người 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);
   
   }
   

   8, đặt siêu năng lực 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);
   
   }
   

   9 vào 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);
   
   }
   

   0 (

   function populateHeader(obj) {
     const header = document.querySelector('header');
     const myH1 = document.createElement('h2');
     myH1.textContent = obj.squadName;
     header.appendChild(myH1);
   
     const myPara = document.createElement('p');
     myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;
     header.appendChild(myPara);
   }
   

   1) bằng cách sử dụng

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

   3.
6. Điều cuối cùng chúng tôi làm là nối các

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

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

   9 và

   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 bên trong

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

   7 (

   function populateHeader(obj) {
     const header = document.querySelector('header');
     const myH1 = document.createElement('h2');
     myH1.textContent = obj.squadName;
     header.appendChild(myH1);
   
     const myPara = document.createElement('p');
     myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;
     header.appendChild(myPara);
   }
   

   7), sau đó nối thêm

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

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

   8. Thứ tự mà mọi 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.

Lưu ý: Nếu bạn gặp khó khăn trong việc làm ví dụ, hãy thử tham khảo mã nguồn của anh hùng của chúng tôi.html (xem nó cũng đang chạy trực tiếp.) If you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.)

Lưu ý: Nếu bạn gặp sự cố khi theo ký hiệu dấu chấm/khung mà chúng tôi đang sử dụng để truy cập đối tượng JavaScript, nó có thể giúp tệp Superheroes.json mở trong một 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 nhìn vào JavaScript. 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 DOT và khung. If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our JavaScript object basics article for more information on dot and bracket notation.

Gọi hàm cấp cao nhất

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

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

Chuyển đổi giữa các đối tượng và văn bản

Ví dụ trên rất đơn giản về mặt truy cập đối tượng JavaScript, vì chúng tôi đã chuyển đổi phản hồi mạng trực tiếp thành đối tượng JavaScript 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);
  }
}

Nhưng đôi khi chúng ta không quá may mắn - đôi khi chúng ta nhận được một chuỗi JSON thô và chúng ta cần phải 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 phát triển web đến nỗi một đối tượng JSON tích hợp có sẵn trong các trình duyệt, chứa hai phương pháp 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);
    }
  }
  

  2: Chấp nhận chuỗi JSON dưới dạng 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);
    }
  }
  

  3: Chấp nhận một đối tượng dưới dạng tham số và trả về chuỗi JSON tương đương.

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

• Chúng tôi lấy lại phản hồi là văn bản chứ không phải 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);
    }
  }
  

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

  2 để chuyển đổi văn bản thành đối tượng JavaScript.

Đoạn mã chính là ở đâ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);
  }
}

let myObj = { name: "Chris", age: 38 };
myObj
let myString = JSON.stringify(myObj);
myString

Ở đây chúng tôi đang tạo một đối tượng JavaScript, sau đó kiểm tra những gì nó chứa, sau đó chuyển đổi nó thành 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);
  }
}

Kiểm tra kỹ năng của bạn!

Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra kỹ năng của bạn: JSON.

Bản tóm tắt

Trong bài viết này, chúng tôi đã cung cấp cho bạn một hướng dẫn đơn giản để sử dụng JSON trong các chương trình của bạn, bao gồm cách tạo và phân tích JSON và 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.

Xem thêm

Trong mô -đun này