Bu blog yazımda javascript ile json dosyasını okuyup dinamik bir şekilde il ilçe seçimi yapmak. Projenin son kodlarını aşağıda vereceğim ve json dosyalarıyla birlikte github hesabımda paylaşmış olacağım.
Bu süreçte öğreneceğimiz maddeleri şöyle sıralayabilirim.
- Javascrit json dosya okuma
- Javascript array forEach
- Javascript array filter
- Javascript array sort
- Html select elemanı kullanımı
Öncelikle javascript il ilçe seçimi uygulamamız için kullanacağımız html kısmını göstereyim.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript İl İlçe</title>
</head>
<body>
<select id="il" onchange="changeProvince()">
<option>İl Seçiniz</option>
</select>
<select id="ilce">
</select>
<script type="text/javascript" src="index.js"></script>
</body>
</html>2 adet select etiketi oluşturduk. Birincisi iller için diğeri ilçeler için olacak. Gerekli javascript kodlamalarını aşağıda anlatacağım.
Javascript json dosyası okuma
Javascript ile harici bir dosya okurken XMLHttpRequest() yapısı ile bir istek atılır. Bunu Jquery kütüphanesi ile daha kolay bir şekilde yapabiliriz fakat ben Pure Javascript ile bunun nasıl yapıldığını göstermek istiyorum.
function readTextFile(file, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function () {
if (rawFile.readyState === 4 && rawFile.status == "200") {
callback(rawFile.responseText);
}
};
rawFile.send(null);
}Bunu büyük yardımcı stackoverflow.com üzerinde bir soruya verilen cevaptan aldım. Verdiğim linkten farklı cevaplara göz atabilirsiniz. Şimdi bu fonksiyonu kullanarak il.json ve ilce.json dosyalarımızı okuyalım.
var cityJson = [];
var districtJson =[];
window.addEventListener('DOMContentLoaded', function(event){
loadJsonFiles();
})
function loadJsonFiles(callback) {
readTextFile("il.json", (data) => {
cityJson = JSON.parse(data);
loadProvince();
});
readTextFile("ilce.json", (data) => {
districtJson = JSON.parse(data);
});
}Dosyalarımızı okuyup değişkenlere atadık. loadProvince() fonksiyonunu index.html dosyamızda oluşturduğumuz listeye tüm illeri eklemek için kullancağız.
Javascript forEach İle Dinamik Option Ekleme
loadProvince() fonksiyonumuz sayfamızın DOM öğeleri yüklendiğinde çalışacak ve id’si il olan select etiketine bütün illeri ekleyecek.
const provinceSelect = document.querySelector("#il");
function loadProvince() {
cityJson.forEach((element) => {
const option = new Option(element.il, element.il);
provinceSelect.add(option, null);
});
}Adında da anlaşılacağı üzere forEach fonksiyonu array içerisindeki her elemana işlem yapmamızı sağlamaktadır. Bu for döngüsü ile de yapılabilir. Her seferinde bir new Option(text, value) değerleri ile oluşturuyoruz ve seçtiğimiz listeye ekliyoruz.
onchange=”changeProvince()”
Html üzerinde select etiketine onchange olayına bir fonksiyon ismi vermiştik. Bu olay her il seçimi yapıldığında tetiklenir. Yani select etiketinde her seçim olayı değiştiğinde bu fonksiyon çağrılır.
function changeProvince() {
districtSelect.innerHTML = "";
districtJson
.filter((element) => element.il === provinceSelect.value)
.sort()
.forEach((element) => {
const option = new Option(element.ilce, element.ilce);
districtSelect.add(option, null);
});
Burada districtJson adlı array’e 3 farklı fonksiyon uyguluyoruz.
Javascript filter
Bu fonksiyon bir filtreleme işlemi uyguluyor. İlçeler dosyasında her elemana bakıp elemen.il değeri seçilen il ile aynı adı taşıyan bütün elemanları geri döndürür.
Javascript sort
Bu fonksiyon gene arrayler üzerine uygulanabilir. Bu sıralama yapmak için kullanılmaktadır. Bu şekilde kullandığımız zaman alfabeye göre sıralama yapacaktır. Buna farklı sıralama ya da her seferinde karıştırıp getirebiliriz. Daha detaylı anlatım için buraya bakabilirsiniz.
Javascript forEach
Bu fonksiyonu yukarıda anlatmıştım. Özet olarak array içerisindeki her elemanı for döngüsündeki gibi almamıza yarar.
Tüm kodlar
var cityJson = [];
var districtJson = [];
const provinceSelect = document.querySelector("#il");
const districtSelect = document.querySelector("#ilce");
window.addEventListener("DOMContentLoaded", function (event) {
loadJsonFiles();
});
function loadJsonFiles(callback) {
readTextFile("il.json", (data) => {
cityJson = JSON.parse(data);
loadProvince();
});
readTextFile("ilce.json", (data) => {
districtJson = JSON.parse(data);
});
}
function loadProvince() {
cityJson.forEach((element) => {
const option = new Option(element.il, element.il);
provinceSelect.add(option, null);
});
}
function changeProvince() {
districtSelect.innerHTML = "";
districtJson
.filter((element) => element.il === provinceSelect.value)
.sort()
.forEach((element) => {
const option = new Option(element.ilce, element.ilce);
districtSelect.add(option, null);
});
}
function readTextFile(file, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function () {
if (rawFile.readyState === 4 && rawFile.status == "200") {
callback(rawFile.responseText);
}
};
rawFile.send(null);
}Json dosyalarıyla birlikte tüm kodları github hesabımdan paylaştım buradan inceleyebilirsiniz. Daha fazla javascript blogu için buraya bakabilirsiniz.
