React Json-Array Sorunu
-
Selam hocalar,
React öğrenmek için kendimce birkaç proje yapıyorum. Bunlardan biride PHP api'den gelen bir json response'u React ön yüzde listelemek istiyorum. Yaptığım şu kodla sadece ana kategoriler geliyor altındaki kategorileri yani 2. matristeki verileri yazdıramadım. yardımcı olabilir misiniz?
{Object.values(kategoriler) && Object.values(kategoriler).map((kategori, i) => ( <li key={i} id={kategori.id}> {kategori.adi} </li> ))}
Kod ve json aşağıdaki :
https://jsfiddle.net/jf8wngL0/1/
iç içe olmayan json çıktımda mesela aşağıdaki gibi çıktı alıyorum fakat iç içe geçince object values falan kullanmak gerekti bayağı uğraştırdı beni.
{urunler && urunler.map((urun) => ({urun}))}
-
aga senin jsonda bir tuhaflık var gibi
her kategoride
{ "1": { "2": { "id": "2", "adi": "Kırıcılar ve Deliciler", "alt_kat_id": "1", "foto": null }, "3": { "id": "3", "adi": "Akülü Vidalamalar", "alt_kat_id": "1", "foto": null }, "4": { "id": "4", "adi": "Matkaplar", "alt_kat_id": "1", "foto": null }, "id": "1", "adi": "Kırıcı Delici ve Matkap Modelleri", "alt_kat_id": "0", "foto": null } }
şunun gibi birşey yapsan yönetmesi daha kolay olur
bunu yaptıktan sonra recursive bir fonksiyonla olur gibi
"1": { "id": "1", "adi": "Kırıcı Delici ve Matkap Modelleri", "alt_kat_id": "0", "foto": null, "alt_kategoriler" : { "2": { "id": "2", "adi": "Kırıcılar ve Deliciler", "alt_kat_id": "1", "foto": null }, "3": { "id": "3", "adi": "Akülü Vidalamalar", "alt_kat_id": "1", "foto": null }, "4": { "id": "4", "adi": "Matkaplar", "alt_kat_id": "1", "foto": null } } },
-
inertiajs.com/
yeni başladıysan böyle bişeyle girişebilirsin hacı. laravelin içinde direkt desteği var zaten. routing vs uğraşmazsın kolaylaştırır işini
-
hocam apiden gelen veri tırt,
şöyle bir json gelse;
[ { "isim": "Kategori 1", "alt": [ { "isim": "Alt Kategori 1" }, { "isim": "Alt Kategori 2" }, { "isim": "Alt Kategori 3" } ] }, { "isim": "Kategori 2", "alt": [ { "isim": "Alt Kategori 1" }, { "isim": "Alt Kategori 2" }, { "isim": "Alt Kategori 3" } ] }, ]
veya
[ { "id": 1, "ust": null, "isim": "Kategori 1", }, { "id": 2, "ust": null, "isim": "Kategori 2", }, { "id": 3, "ust": 1, "isim": "Alt Kategori 1" }, { "id": 4, "ust": 1, "isim": "Alt Kategori 2" }, { "id": 5, "ust": 1, "isim": "Alt Kategori 3" } ]
işin daha kolay olur, önce apiyi elden geçirmeni öneririm.
-
Evet api'den gelen json veriyi ben oluşturduğum için tırt :D onu da php'de aşağıdaki şekilde yaptm sanırım mantık hatası oldu.
$ksql = $db->query('select * from kategoriler'); while($kgetir=$ksql->fetch(PDO::FETCH_ASSOC)) { if ($kgetir['alt_kat_id'] == 0) { $sonuc[$kgetir['id']] = $kgetir; $kid = $kgetir['id']; $altsql = $db->prepare("select * from kategoriler where alt_kat_id = :aki"); $altsql->execute(array("aki"=>$kid)); while ($kagetir=$altsql->fetch(PDO::FETCH_ASSOC)){ $sonuc[$kgetir['id']][$kagetir['id']] = $kagetir; } } } echo json_encode($sonuc);
@acemi-webci ve wert'in gösteriği gibi bir çıktı almaya çalışacağım.
aslında hepsini alt alta yazdırıp ana kategori-alt kategori olayını react'ta çözebilirim değil mi ? evetse nasıl :D
json'ı aşağıdaki şekilde düzenledim.
[ { "id": "1", "adi": "Kırıcı Delici ve Matkap Modelleri", "alt_kat_id": "0", "foto": null }, { "id": "2", "adi": "Kırıcılar ve Deliciler", "alt_kat_id": "1", "foto": null }, { "id": "3", "adi": "Akülü Vidalamalar", "alt_kat_id": "1", "foto": null } ]
aşağıdaki gibi yapınca da tüm kategori adları geldi tabii şimdi sanırım if ile alt kategorisini belirtmek lazım
{kategoriler && kategoriler.map((kategori, i) => ( <li key={i} id={kategori.id}> {kategori.adi} </li> ))}
-
ana kategorinin altına alt kategoriyi nasıl yazdırabilirim ya deniyorum bir türlü mantığı kuramadım ?
{kategoriler && kategoriler.map((kategori, i) => ( <li key={i} id={kategori.id}> {kategori.adi} {kategori.alt_kat_id === 0 ? '' : <ul><li> {kategori.adi} </li></ul> } </li> ))}
çıktısı :
-
flat listi tree hale çevirsen daha rahat basarsın. Çoklu alt kategori olduğunda da sıkıntı yaşamazsın.
https://gist.github.com/alonronin/2592a6a81db67804db1f örnek şuradan bakabilirsin. -
yok ya yapamadım maalesef php de aşağıdaki şekilde listeleyebiliyorum ama react'ta kuramadım yapıyı.
<?php $ksql = $db->query('select * from kategoriler'); while($kgetir=$ksql->fetch(PDO::FETCH_ASSOC)) { if ($kgetir['alt_kat_id'] ==0) { echo "<option disabled>+" . $kgetir['adi'] . "</option>"; $kid = $kgetir['id']; $altsql = $db->prepare("select * from kategoriler where alt_kat_id = :aki"); $altsql->execute(array("aki"=>$kid)); while ($kagetir=$altsql->fetch(PDO::FETCH_ASSOC)){ echo "<option value='" . $kagetir['id'] . "'>--" . $kagetir['adi'] . "</option>"; } } } ?>
-
json datanı düzelttikten sonra bu kodu inceleyebilirsin
const generateCategoryTree = (categoryData) => { return <ul> {categoryData.map(cat => <li> {cat.adi} { cat.alt_kategoriler ? generateCategoryTree(cat.alt_kategoriler) : null } </li>)} </ul> }
örnek jsonda böyle
categories = [ { "id": "1", "adi": "Kırıcı Delici ve Matkap Modelleri", "alt_kat_id": "0", "foto": null, "alt_kategoriler": [ { "id": "2", "adi": "Kırıcılar ve Deliciler", "alt_kat_id": "1", "foto": null, "alt_kategoriler": [] }, { "id": "3", "adi": "Akülü Vidalamalar", "alt_kat_id": "1", "foto": null, "alt_kategoriler": [] }, { "id": "4", "adi": "Matkaplar", "alt_kat_id": "1", "foto": null, "alt_kategoriler": [] } ] }, { "id": "5", "adi": "Testere Modelleri", "alt_kat_id": "0", "foto": null, "alt_kategoriler": [ { "id": "6", "adi": "Testereler", "alt_kat_id": "5", "foto": null, "alt_kategoriler": [] }, { "id": "7", "adi": "Tezgah Tipi Testereler", "alt_kat_id": "5", "foto": null, "alt_kategoriler": [] }, { "id": "8", "adi": "Motorlu Testere", "alt_kat_id": "5", "foto": null, "alt_kategoriler": [ { "id": "1", "adi": "Kırıcı Delici ve Matkap Modelleri", "alt_kat_id": "0", "foto": null, "alt_kategoriler": [ { "id": "2", "adi": "Kırıcılar ve Deliciler", "alt_kat_id": "1", "foto": null, "alt_kategoriler": [] }, { "id": "3", "adi": "Akülü Vidalamalar", "alt_kat_id": "1", "foto": null, "alt_kategoriler": [] }, { "id": "4", "adi": "Matkaplar", "alt_kat_id": "1", "foto": null, "alt_kategoriler": [] } ] } ] } ] } ]
kullanacağın zamanda böyle
<div> {generateCategoryTree(categories)} </div>
-
çıktısı böyle (ayne şeyleri yazmış deme ben mevcut bir categoriyi diğerinin altına c/p yaptım)
- Kırıcı Delici ve Matkap Modelleri
- Kırıcılar ve Deliciler
- Akülü Vidalamalar
- Matkaplar
- Testere Modelleri
- Testereler
- Tezgah Tipi Testereler
- Motorlu Testere
- Kırıcı Delici ve Matkap Modelleri
- Kırıcılar ve Deliciler
- Akülü Vidalamalar
- Matkaplar
- Kırıcı Delici ve Matkap Modelleri
- Kırıcı Delici ve Matkap Modelleri
-
EmQceR bunu yazdı
yok ya yapamadım maalesef php de aşağıdaki şekilde listeleyebiliyorum ama react'ta kuramadım yapıyı.
https://stackoverflow.com/questions/14740429/flat-php-array-to-hierarchy-tree