05.04.01. FlatList Örneği: JSON veriyi işleme

Bu bölümde internet üzerinden üretilmiş bir JSON dosyayı alıp, FlatList içinde göstereceğim.

İnternetten hazır JSON üretici için “https://randomuser.me/api/” API’sini kullandım. Bu API, JSON formatında rastgele kullanıcılar üretiyor ve hatta resim link bilgisi var. Ayrıca, ad ve e-mail bilgisi içeriyor. Buradan verileri indirip FlatList içinde göstereceğim.

componentDidMount() metodu Mount işlemi olduktan sonra çalışır. (Yeni versiyonlarda unsafe olarak açıklanıyor, ancak bir AJAX isteği yapmak içinde çok sık şekilde kullanılıyor. Gelecekte buraya bir güncelleme yapabilirim.) Ardından makeRemoteRequest fonksyionu fetch komutu ile linkten verileri çekiyor, çekme işlemi bitince “res => res.json()” ile sonuçlar alınıyor ve son aşamada state bilgisi güncelleniyor. catch ise bir hata olduğunda çalışıyor ve state bilgisini güncelliyor. render bölümünde elde edilen veriler gösteriliyor. Bu veriler JSON formatında ve bir dizi şeklindedir. Bu dizinin her öğresi bir item’dır. FlatList içinde her öğe için gösterilecek bilgiler renderItem’a uygun olarak düzenleniyor. (Verilere nasıl ulaşıldığını daha iyi anlamak için JSON dosyayı inceleyin.)

Bu örneğin daha gelişmiş versiyonunu için tıklayın.