xDarkLyne
Hectopat
- Katılım
- 27 Temmuz 2020
- Mesajlar
- 2.792
- Makaleler
- 14
- Çözümler
- 38
Daha fazla
- Cinsiyet
- Erkek
- Meslek
- Yazılım, Güvenlik
.map nedir?JavaScript'de dizi elemanlarını bir döngüye alıp tümüne işlem edip sonuçlarını yeni bir diziye eklemek için map metodunu kullanıyoruz.
[CODE lang="json" title="Kod"][
{
"id":1,
"name":"Kola",
"desc":"İçeceğin",
"price":"5"
},
{
"id": 2,
"name": "Defter",
"desc": "İhtiyacın",
"price":"5"
},
{
"id": 3,
"name": "Silgi",
"desc": "İhtiyacın",
"price":"2"
},
{
"id": 4,
"name": "Cips",
"desc": "Atıştırmalığın",
"price":"4"
},
{
"id": 5,
"name": "Çikolata",
"desc": "Atıştırmalığın",
"price":"1"
}
][/CODE]
Bu JSON dosyasını reacta yazdırmak istediğimizde hiçbir şey olmuyor!
Ancak eğer
.map metodunu kullanırsak çalıştığını göreceksiniz.[CODE lang="javascript" title="Kod"]import React from 'react'.
import jsons from './jsonOrnegi.json'
export default function jsonOrnegi() {
return (
<div className="jsonOrnekleri">
{jsons.length && jsons.map(jsonlar => (
<p>{jsonlar.name} adlı {jsonlar.desc} fiyatı: ₺{jsonlar.price}</p>
))}
</div>
)
}
[/CODE]
Çıktı:
Detaylı anlatım:
&& Ve operatörü sayesinde
jsons.length ve jsons.map diyebiliriz..map özelliği sayesinde tüm elemanlarımı döngüye aldım ve sonuçlarını yeni bir diziye atadım. Bu yüzden tüm elemanlarımın fiyatı, tutarı vb. çıktı.React kullandığımdan dolayı paragraf içerisine aldım. Eğer düz JS kullanıyorsanız aşağıdaki kodları kullanabilirsiniz.
[CODE lang="javascript" title="Kod"]let urunler = [
{id:1, name:"Defter", desc:"İhtiyacın", price:12},
{id:1, name:"Silgi", desc:"İhtiyacın", price:5},
{id:1, name:"Çanta", desc:"İhtiyacın", price:100},
{id:1, name:"Kalem traş", desc:"İhtiyacın", price:2},
{ id: 1, name: "Kalem kutu", desc: "İhtiyacın", price: 15}
]
console.log(urunler.map(urun => urun.name + ' adlı ' + urun.desc + ' fiyatı: ' + urun.price))
//isterseniz document.write kullanabilirsiniz.
[/CODE]
Atladığım yerler varsa lütfen söyleyin.
Son düzenleme:
