JavaScript Dosyalarına Nasıl JSON Dosyası Eklenir?
a) HTML Sayfası İçerisindeki Javascript
HTML sayfasına data.json isimli bir dosya içerisinden verileri aktarmak istediğimiz zamanlarda ilk olarak yapmamız gereken işlem sayfamıza eklemiş olduğumuz JavaScript dosyasının type değerini değiştirmek olacaktır.
<script src="app.js" type="module"></script>
type="module" olarak ayarlandıktan sonra artık data.json isimli dosyasımızı başarılı bir şekilde projemizin içerisine dahil edebiliriz. Tabi .json dosyasını projenin içerisine dahil etmenin birden çok yöntemi olabilir.
1. Bunların birincisi olarak doğrudan import anahtar kelimesi ile dahil ederek ekleme işlemini gösterebiliriz.
import data from './data.json' assert {type:"json"}
console.log(data)
Yukarıda görüldüğü gibi bu işlem yapılırken assert ile {type:"json"} değerini ayarladığımızı görmektesiniz. Eğer type değeri ayarlanmazsa .js doğrudan JSON veri formatında dosya eklemeye izin vermeyecektir. Tabiki HTML sayfası için bu durum söz konusudur 😊
2. import anahtar kelimesinin yaptığı işlemi dosya okuyucu olan metodlar aracılığı ile yapabilmekteyiz. Tabi ben burada hem dosya okuma hem de sunucuya veri gönderme amaçları için kullanılan Fetch.api yapısını göstereceğim.
let data = await fetch('./data.json')
data = await data.json()
console.log(data)
Yukarıdaki gibi fetch metodu ile ve 1. maddede belirttiğimiz import işlemi ile verileri dahil edebilmemiz için kesinlikle type:"module" olarak ayarlandığından emin olmamız gerekmektedir. Her şeyi sıralı bir şekilde yaptığımıza göre artık console.log() ile tararıyıcımızın konsolunda data.json dosyamızın verilerini göreceğiz.
b) React Sayfası İçerisindeki Javascript
React.js ile uygulama yazarken projemizin içerisine eğer data.json gibi bir dosya eklemek istiyorsak bu durumda yapmamız gereken işlem aslında HMTL sayfasındaki işleme oldukça benzemektedir. Fakat bir farkla örneğin biz HTML sayfası içerisindeki "JS" dosyasına data.json dosyasını eklerken import işleminde assert {type:"json"} şeklinde bir komut daha eklemiştik. React.js tarafında artık bu sorununda önüne geçildiğinden doğrudan import anahtar kelimesi ile ekleme işlemini yapabiliriz.
import data from './data.json'
console.log(data)
React.js ile MIME type sorunu ortadan kaldırılmıştır. Bu nedenle yukarıdaki çok daha kısa bir yazım tarzı ile .json dosyasını başarılı bir şekilde projenizin içerisine dahil edebilirsiniz. Tabi yukarıda yazmış olduğumuz fetch.api işlemi ile de veri çekilme işlemi aynen yapılabilmektedir.
b) Node.js Sayfası İçerisindeki Javascript
Node.js içerisindeki erişimlerimizden önce package.json dosyası içerisinden "type" değerini ayarlamamız gerekmektedir. Eğer type değeri "commonjs" olarak ayarlandıysa:
const data = require('./data.json')
console.log(data)
require anahtar kelimesini kullanarak .json dosyamızı .js alanına dahil etmiş olacağız. Eğer type değeri "module" olarak ayarlandıysa bu durumda
import data from './data.json' assert {type:"json"}
console.log(data)
yine import işlemine assert {type:"json"} değerini atamamız gerekmektedir.
NOT: Sunucu tarafında fetch.api yapısı çalışmamaktadır. Bunun yerine dosya okuma işlemleri için farklı metodlar kullanılabilir.
Bu yazımızda sizlere .json dosyanızı nasıl .js içerisine dahil edebileceğinizi göstermeye çalıştım. Yazıyı beğendiyseniz takipte kalın destek olun efem 😊