Cara gelung melalui respons json di javascript

Tutorial ini menunjukkan bagaimana untuk menghuraikan data JSON dengan cekap dari pelayan jauh menggunakan JavaScript. Kami akan meliputi proses dalam dua langkah: menyahkod rentetan JSON ke dalam struktur JavaScript yang boleh digunakan (objek atau array), dan kemudian meleleh melalui struktur itu untuk mengakses data. Kami akan menggunakan contoh praktikal dengan kedua -dua

dan lebih moden XMLHttpRequest api. fetch

Konsep Utama:

1. json (notasi objek JavaScript): Format interaksi data berasaskan teks yang ringan digunakan secara meluas dalam aplikasi web. Semasa diilhamkan oleh sintaksis literal objek JavaScript, JSON dengan ketat memerlukan petikan berganda di sekitar kunci.
2. JSON PARSING: Proses menukar rentetan JSON ke objek JavaScript atau array. Ini penting kerana pelayan menghantar data sebagai rentetan, yang perlu dihuraikan sebelum ia boleh digunakan.
3. iTeration: Selepas parsing, kami menggunakan kaedah terbina dalam JavaScript seperti , for...in, Object.entries, atau kaedah array (, dan sebagainya) untuk mengakses elemen data individu dalam struktur yang dihuraikan. Object.values forEach

Memahami JSON:

data json boleh disusun dalam dua cara:

objek json:
• koleksi pasangan nama/nilai (serupa dengan objek JavaScript).
JSON Array:
• Senarai nilai yang diperintahkan (serupa dengan array JavaScript).

mengambil json dengan

: XMLHttpRequest mari kita gunakan API

(API jenaka mudah) sebagai contoh. API ini mengembalikan data JSON apabila pengepala

ditetapkan ke icanhazdadjoke. Accept application/json Pertama, kita mengambil data:

Respons adalah rentetan. Kami menghuraikannya menggunakan

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(typeof xhr.responseText); // Output: string
    console.log(xhr.responseText);       // Output: JSON string
  }
};
xhr.open('GET', 'https://icanhazdadjoke.com/', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.send(null);

:

JSON.parse()

Sekarang, kita boleh melangkah melalui sifat objek. Berikut adalah beberapa cara:

if (xhr.readyState === XMLHttpRequest.DONE) {
  const response = JSON.parse(xhr.responseText);
  console.log(response); // Output: Parsed JavaScript object
}

• Loop: for...in

for (const key in response) {
  if (response.hasOwnProperty(key)) {
    console.log(`${key}: ${response[key]}`);
  }
}

• : Pendekatan yang lebih moden dan ringkas: Object.entries()

Object.entries(response).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

mengambil json dengan

api: fetch API

menawarkan pendekatan yang bersih dan berasaskan janji:

fetch

(async () => {
  const response = await fetch('https://icanhazdadjoke.com/', {
    headers: { Accept: 'application/json' },
  });
  const jsonData = await response.json();
  Object.entries(jsonData).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });
})();

memasangkan badan tindak balas sebagai JSON dan mengembalikan janji yang menyelesaikan dengan data yang dihuraikan.

response.json()

Mengendalikan array JSON:

mari kita ambil senarai repositori dari API GitHub:

Contoh ini menunjukkan lelaran melalui array JSON menggunakan

(async () => {
  const repos = await fetch('https://api.github.com/users/jameshibbard/repos').then(res => res.json());
  repos.forEach(repo => {
    console.log(`${repo.name} has ${repo.stargazers_count} stars`);
  });
})();

. Anda boleh menggunakan kaedah array lain seperti

atau forEach untuk operasi yang lebih kompleks. map filter

Kesimpulan:

Tutorial ini meliputi langkah -langkah penting parsing dan meleleh melalui respons JSON dalam JavaScript, menggunakan kedua -dua XMLHttpRequest dan fetch API. Ingatlah untuk mengendalikan kesilapan yang berpotensi (mis., Isu rangkaian, JSON tidak sah) dalam persekitaran pengeluaran. API fetch, dengan pendekatan berasaskan janjinya, biasanya lebih disukai untuk sintaks bersih dan keupayaan pengendalian ralat yang lebih baik.

Atas ialah kandungan terperinci Cara gelung melalui respons json di javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!