React Json-Array Sorunu

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    EmQceR
    EmQceR's avatar
    Kayıt Tarihi: 14/Kasım/2007
    Erkek

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


    Bu Yüce Türk Milleti ne ihanetler gördü hepsinin üstesinden gelmeyi başararak tarihe nice zaferler yazdırdı. Bu Millet Kuva-yı milliye hareketini yeniden başlatır. Sivas Kongresini yeniden toplar, Ya İstiklal, Ya Ölüm diye haykırır ve gereğini yapar. Türk Milleti ihaneti ve hainleri hiç affetmez. Dileğimiz odur ki bu iş sandıkta bitsin, aksi halde "sürüye dalmayı göze alan Kurt, çobanın da, köpeğinde hesabını yapmaz."
  2. KısayolKısayol reportŞikayet pmÖzel Mesaj
    wert
    wert's avatar
    Kayıt Tarihi: 19/Eylül/2005
    Erkek

    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
                    }
                }
        },

     


    |sadece aptalların başarısı ders notu ile ölçülür|
  3. KısayolKısayol reportŞikayet pmÖzel Mesaj
    yolbulucu
    yolbulucu's avatar
    Kayıt Tarihi: 06/Nisan/2007
    Homo

    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

     


    29.99cm, titanyum kaplamalı, çift damarlı, su ve yağ soğutmalı.
  4. KısayolKısayol reportŞikayet pmÖzel Mesaj
    acemi-webci
    acemi-webci's avatar
    Kayıt Tarihi: 11/Haziran/2008
    Erkek

    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.


    ...
  5. KısayolKısayol reportŞikayet pmÖzel Mesaj
    EmQceR
    EmQceR's avatar
    Kayıt Tarihi: 14/Kasım/2007
    Erkek

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

     

    EmQceR tarafından 16/May/23 10:28 tarihinde düzenlenmiştir

    Bu Yüce Türk Milleti ne ihanetler gördü hepsinin üstesinden gelmeyi başararak tarihe nice zaferler yazdırdı. Bu Millet Kuva-yı milliye hareketini yeniden başlatır. Sivas Kongresini yeniden toplar, Ya İstiklal, Ya Ölüm diye haykırır ve gereğini yapar. Türk Milleti ihaneti ve hainleri hiç affetmez. Dileğimiz odur ki bu iş sandıkta bitsin, aksi halde "sürüye dalmayı göze alan Kurt, çobanın da, köpeğinde hesabını yapmaz."
  6. KısayolKısayol reportŞikayet pmÖzel Mesaj
    EmQceR
    EmQceR's avatar
    Kayıt Tarihi: 14/Kasım/2007
    Erkek

    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ı :


    Bu Yüce Türk Milleti ne ihanetler gördü hepsinin üstesinden gelmeyi başararak tarihe nice zaferler yazdırdı. Bu Millet Kuva-yı milliye hareketini yeniden başlatır. Sivas Kongresini yeniden toplar, Ya İstiklal, Ya Ölüm diye haykırır ve gereğini yapar. Türk Milleti ihaneti ve hainleri hiç affetmez. Dileğimiz odur ki bu iş sandıkta bitsin, aksi halde "sürüye dalmayı göze alan Kurt, çobanın da, köpeğinde hesabını yapmaz."
  7. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Cosmic
    Cosmic's avatar
    Kayıt Tarihi: 14/Haziran/2006
    Erkek

    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.


    Bittik biz bittik
  8. KısayolKısayol reportŞikayet pmÖzel Mesaj
    EmQceR
    EmQceR's avatar
    Kayıt Tarihi: 14/Kasım/2007
    Erkek

    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>";
                                                        }
                                                    }
                                                }
    											?>

     


    Bu Yüce Türk Milleti ne ihanetler gördü hepsinin üstesinden gelmeyi başararak tarihe nice zaferler yazdırdı. Bu Millet Kuva-yı milliye hareketini yeniden başlatır. Sivas Kongresini yeniden toplar, Ya İstiklal, Ya Ölüm diye haykırır ve gereğini yapar. Türk Milleti ihaneti ve hainleri hiç affetmez. Dileğimiz odur ki bu iş sandıkta bitsin, aksi halde "sürüye dalmayı göze alan Kurt, çobanın da, köpeğinde hesabını yapmaz."
  9. KısayolKısayol reportŞikayet pmÖzel Mesaj
    wert
    wert's avatar
    Kayıt Tarihi: 19/Eylül/2005
    Erkek

    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>
     
    wert tarafından 16/May/23 22:43 tarihinde düzenlenmiştir

    |sadece aptalların başarısı ders notu ile ölçülür|
  10. KısayolKısayol reportŞikayet pmÖzel Mesaj
    wert
    wert's avatar
    Kayıt Tarihi: 19/Eylül/2005
    Erkek

    çı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

     

    wert tarafından 16/May/23 22:45 tarihinde düzenlenmiştir

    |sadece aptalların başarısı ders notu ile ölçülür|
  11. KısayolKısayol reportŞikayet pmÖzel Mesaj
    wert
    wert's avatar
    Kayıt Tarihi: 19/Eylül/2005
    Erkek
    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

     


    |sadece aptalların başarısı ders notu ile ölçülür|
Toplam Hit: 2273 Toplam Mesaj: 14
json array react