JSの練習_郵便番号から住所を検索

前提と準備

前提

閉鎖ネットワーク下でも使えるようにしたかったのでAPIは使用しない。
JS覚えたてホヤホヤなので実用的なものは今のところ無視。

準備

日本郵便のサイトからCSVファイルをダウンロードして、エクセルやエディタでクリーニングしたあと、オブジェクトに突っ込む。

サンプル

var addressList = [
{"zipcode":"1020072","prefecture":"東京都","city":"千代田区","town":"飯田橋"},
{"zipcode":"1020082","prefecture":"東京都","city":"千代田区","town":"一番町"},
{"zipcode":"1010032","prefecture":"東京都","city":"千代田区","town":"岩本町"},
{"zipcode":"1010047","prefecture":"東京都","city":"千代田区","town":"内神田"},
{"zipcode":"1000011","prefecture":"東京都","city":"千代田区","town":"内幸町"},
...];

やったこと

1.addressIndexの生成

郵便番号で検索かけたときに、キー値が直接とれるとうれしかったのだけど、配列じゃないと無理っぽい。
このためaddressListから取得した郵便番号で、addressIndexという配列を生成しなおす。
addressListのオブジェクトから配列を生成することで、addressListとaddressIndexの並び順は同じになるはず。

var addressIndex= []; //空の配列を作成

//郵便番号だけでindexを生成
for( i in addressList){
    addressIndex.push(addressList[i].zipcode);
}

2.キー値の取得から住所情報へのリターン

//2-1はhtml側からid="zipcode"に入力された値を変数zipCodeに格納。
//2-2でそれを配列addressIndexに問い合わせて、キー値を取得した後、変数iNumに格納している。
それ以降はiNumで取得したキー値をつかって、オブジェクトaddressListの各プロパティとプロパティ値にアクセスしている。
なお、if(iNum != "-1")は、無効な郵便番号を問い合わせたときのための処理。

//郵便番号検索クリックで住所欄に住所を挿入
$("#zipcode-serch").on('click',function(){
    var zipCode = $("#zipcode").val(); //2-1
    var iNum = addressIndex.indexOf(zipCode); //2-2
    if(iNum != "-1"){
       var return_address = addressList[iNum].prefecture+addressList[iNum].city+addressList[iNum].town;
       $("#address").val(return_address);
        }
    });

感想

30過ぎてからコード書き始めたけども覚えることそのものよりも、合間をぬってコツコツコード書くことが実は一番大変な気がする。（特に仕事（コーディングしてない）が忙しいとき。）
皆さんどうやって勉強してるんだか...。