Kodlib - Blog
  • React Native
  • Php
  • Javascript
  • Unity
No Result
View All Result
Kodlib - Blog
  • React Native
  • Php
  • Javascript
  • Unity
No Result
View All Result
Kodliblog
No Result
View All Result

Javascript Json İl İlçe Seçimi

Enes Can Güneş by Enes Can Güneş
Ağustos 23, 2020
in javascript

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ı
Javascript il ilçe
Javascriptil il ilçe

Ö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.

ShareTweetShareSend
Enes Can Güneş

Enes Can Güneş

Yazılım Mühendisliği öğrencisi. Yazılım ile problem çözmekle uğraşan bir yazılım geliştirici. Javascript - Nodejs - Php

Related Posts

javascript var let const değişken tanımlama ve değişken türleri
javascript

JavaScript Değişken Tanımlama – var, let, const

Merhaba bu yazımda JavaScript ile değişken tanımlama (var, let, const) konusunu ve değişken türlerini anlatacağım. Umarım faydası olur iyi okumalar....

Ocak 2, 2021
29
Javascript async await nedir
javascript

Javascript Async Await Nedir Nasıl Kullanılır?

Javascript async await nedir? Asenkron çalışmalar nerelerde kullanılır? Bundan önce Javascript promise nedir? adlı yazı yazmıştım. Bu yazımda ise async...

Temmuz 19, 2020
770
Javascript promise nedir
javascript

Javascript Promise Nedir? Neden Kullanılır?

Javacript promise yapısı gerçekten öenmli bir konu. Öğrendikten sonra görmediğiniz, kullanmadığınız yer neredeyse olmayacak. Peki javascript promise nedir? Javascript promise...

Mayıs 13, 2020
186
Javascript arguments nedir
javascript

Javascript Arguments Nedir? Kullanım Örnekleri

Javascript arguments nedir? Javascript programlama dilinde arguments diye bir kavram var. Arguments fonksiyon içerisinde kullanılabilen bir array benzeri yapıdır. Tam...

Mayıs 1, 2020
101
Next Post
nodejs express kullanımı

Nodejs Express Kullanımı

react-firebase-dosya-yükleme

React Js Firebase Dosya Yükleme

Bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Önerilenler

Javascript arguments nedir

Javascript Arguments Nedir? Kullanım Örnekleri

Mayıs 1, 2020
101
react-firebase-dosya-yükleme

React Js Firebase Dosya Yükleme

Aralık 25, 2020
20
Joi kullanımı

Nodejs Joi Kullanımı ve Örnekleri

Ocak 24, 2021
4
laravel firebse ssl hatası

Laravel Firebase SSL certificate problem Hatası Ve Çözümü

Nisan 5, 2020
39

Kategoriler

  • expressjs
  • javascript
  • laravel
  • nodejs
  • php
  • python
  • react
  • react-native
  • Unity
  • web-progralama

Kodlib Hakkında

Kodlib Yazılım Hakkında bloglar içerir. Yazılım süreçleri, mühendislik ve bu süreçte yaşanan deneyimleri blog şeklinde sunar.
#EvdeKal
Copyright 2020 @kodlibcom

Kategoriler

  • expressjs
  • javascript
  • laravel
  • nodejs
  • php
  • python
  • react
  • react-native
  • Unity
  • web-progralama

Sosyal Medya

No Result
View All Result
  • React Native
  • Php
  • Javascript
  • Unity