JSON parse
- React Native kursu
- Orta seviye
- Ders 39/116
- 5 dk
response.json() ile JSON parse öğrenirsin.
JSON parse nedir?
fetch'in döndürdüğü Response nesnesi ham yanıtı taşır; veriyi doğrudan vermez. Veriyi çıkarmak için response.json() metodunu çağırırsın. Bu metot yanıtı bir JSON olarak ayrıştırır ve JavaScript nesnesine çevirir.
Örnek: const data = await response.json();. Bu satır yanıtı bekler, JSON olarak ayrıştırır ve data'ya atar. data artık sıradan bir JavaScript nesnesidir; data.name gibi alanlara erişebilirsin. response.json() da bir Promise döndürür; bu yüzden await ile beklenmelidir. JSON, şunucular arası veri alışverişinin standart biçimidir; anahtar-değer çiftlerinden oluşur. Yanıt JSON değilse (HTML veya düz metin), response.text() kullanırsın. Doğru metodu yanıtı türüne göre seçmelisin.
JSON verisini kullanma
response.json() çağrısı bir JavaScript nesnesi döndürür. Bu nesnenin alanlarına nokta ile erişirsin: data.name, data.email. Eğer yanıt bir diziyse, data[0].name gibi indeks ile erişirsin.
Örnek API yanıtı: { id: 1, name: "Ayşe", email: "ayse@example.com" }. Bu nesnede data.name "Ayşe" verir. Eğer yanıt [{ id: 1, name: "Ayşe" }, { id: 2, name: "Alex" }] gibi bir dizi ise data.length 2 verir, data[0].name "Ayşe" verir. React'te bu veriyi state'e koyup bileşende gösterebilirsin. Veriyi render etmeden önce varlığını kontrol etmek önemlidir; aksi halde ilk render'da undefined hatası alırsın.
Uygulama JSON yanıtı ayrıştır
Bir async function loadUser yaz. await fetch("https://api.example.com/users/1") çağrısını const response'a ata. await response.json() çağrısını const data'ya ata. console.log(data.name) çağrısı yap.
Başlangıç kodu
// async function loadUser yaz
// await fetch ile response al
// yanıtı ayrıştırıp ismi konsola yazÖrnek çözüm
async function loadUser() {
const response = await fetch("https://api.example.com/users/1");
const data = await response.json();
console.log(data.name);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 response.json() ne döndürür?
const data = await response.json();- String
- Number
- Promise Doğru cevap
- Boolean
Açıklama: response.json() bir Promise döndürür; bu yüzden await ile beklenir.
2 response.json() çağrısını yaz
const data = await ____;const data = await response.json();Açıklama: response.json() yanıtı ayrıştırır.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
response.json() |
JSON ayrıştırır |
data.name |
Alan erişimi |
await |
Promise bekler |
Response |
Ham yanıt |