jsonデータで都道府県を表示するjavascript

私的メモ

単純にjsonデータから、javascriptを使い表示するサンプル

Jsonデータ⇒zenkoku.json

var kenList =
{
    "hokaidou" : [
        {
            "number":"1",
            "ken": "北海道",
            "shozaiti": "札幌市"
        },
    ],

    "touhoku" : [
        {
            "number":"2",
            "ken": "青森県",
            "shozaiti": "青森市"
        },
        {
            "number":"3",
            "ken": "岩手県",
            "shozaiti": "盛岡市"
        },
        {
            "number":"4",
            "ken": "宮城県",
            "shozaiti": "仙台市"
        },
        {
            "number":"5",
            "ken": "秋田県",
            "shozaiti": "秋田市"
        },
        {
            "number":"6",
            "ken": "山形県",
            "shozaiti": "山形市"
        },
        {
            "number":"7",
            "ken": "福島県",
            "shozaiti": "福島市"
        }
    ],

    "kantou" : [
        {
            "number":"8",
            "ken": "茨城県",
            "shozaiti": "水戸市"
        },
        {
            "number":"9",
            "ken": "栃木県",
            "shozaiti": "宇都宮市"
        },
        {
            "number":"10",
            "ken": "群馬県",
            "shozaiti": "前橋市"
        },
        {
            "number":"11",
            "ken": "埼玉県",
            "shozaiti": "さいたま市"
        },
        {
            "number":"12",
            "ken": "千葉県",
            "shozaiti": "千葉市"
        },
        {
            "number":"13",
            "ken": "東京都",
            "shozaiti": "新宿区"
        },
        {
            "number":"14",
            "ken": "神奈川県",
            "shozaiti": "横浜市"
        },
    ],

    "koushin_hoku" : [
        {
            "number":"15",
            "ken": "新潟県",
            "shozaiti": "新潟市"
        },
        {
            "number":"16",
            "ken": "富山県",
            "shozaiti": "富山市"
        },
        {
            "number":"17",
            "ken": "石川県",
            "shozaiti": "金沢市"
        },
        {
            "number":"18",
            "ken": "福井県",
            "shozaiti": "福井市"
        },
        {
            "number":"19",
            "ken": "山梨県",
            "shozaiti": "甲府市"
        },
        {
            "number":"20",
            "ken": "長野県",
            "shozaiti": "長野市"
        },
    ],

    "toukai" : [
        {
            "number":"21",
            "ken": "岐阜県",
            "shozaiti": "岐阜市"
        },
        {
            "number":"22",
            "ken": "静岡県",
            "shozaiti": "静岡市"
        },
        {
            "number":"23",
            "ken": "愛知県",
            "shozaiti": "名古屋市"
        },
        {
            "number":"24",
            "ken": "三重県",
            "shozaiti": "津市"
        },
    ],
    "kinki" : [
        {
            "number":"25",
            "ken": "滋賀県",
            "shozaiti": "大津市"
        },
        {
            "number":"26",
            "ken": "京都府",
            "shozaiti": "京都市"
        },
        {
            "number":"27",
            "ken": "大阪府",
            "shozaiti": "大阪市"
        },
        {
            "number":"28",
            "ken": "兵庫県",
            "shozaiti": "神戸市"
        },
        {
            "number":"29",
            "ken": "奈良県",
            "shozaiti": "奈良市"
        },
        {
            "number":"30",
            "ken": "和歌山",
            "shozaiti": "和歌山市"
        },
    ],
	
    "tyugoku" : [
        {
            "number":"31",
            "ken": "鳥取県",
            "shozaiti": "鳥取市"
        },
        {
            "number":"32",
            "ken": "島根県",
            "shozaiti": "松江市"
        },
        {
            "number":"33",
            "ken": "岡山県",
            "shozaiti": "岡山市"
        },
        {
            "number":"34",
            "ken": "広島県",
            "shozaiti": "広島市"
        },
        {
            "number":"35",
            "ken": "山口県",
            "shozaiti": "山口市"
        },
    ],
	
    "shikoku" : [
        {
            "number":"36",
            "ken": "徳島県",
            "shozaiti": "徳島市"
        },
        {
            "number":"37",
            "ken": "香川県",
            "shozaiti": "香川市"
        },
        {
            "number":"38",
            "ken": "愛媛県",
            "shozaiti": "松山市"
        },
        {
            "number":"39",
            "ken": "高知県",
            "shozaiti": "高知市"
        },
    ],
    "kyushuu" : [
        {
            "number":"40",
            "ken": "福岡県",
            "shozaiti": "福岡市"
        },
        {
            "number":"41",
            "ken": "佐賀県",
            "shozaiti": "佐賀市"
        },
        {
            "number":"42",
            "ken": "長崎県",
            "shozaiti": "長崎市"
        },
        {
            "number":"43",
            "ken": "熊本県",
            "shozaiti": "熊本市"
        },
        {
            "number":"44",
            "ken": "大分県",
            "shozaiti": "大分市"
        },
        {
            "number":"45",
            "ken": "宮崎県",
            "shozaiti": "宮崎市"
        },
        {
            "number":"46",
            "ken": "鹿児島県",
            "shozaiti": "鹿児島市"
        },
    ],
	
    "okinawa" : [
        {
            "number":"47",
            "ken": "沖縄県",
            "shozaiti": "那覇市"
        },
    ],

}

html+javascript

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jsonで表示【都道府県】</title>
<script src="zenkoku.json.js" type="text/javascript"></script>
</head>
 
<body>

<style>
.hokaidou{background-color:seagreen;}
.touhoku{background-color:royalblue;}
.kantou{background-color:gold;}
.koushin_hoku{background-color:khaki;}
.toukai{background-color:aqua;}
.kinki{background-color:plum;}
.shikoku{background-color:lightskyblue;}
.tyugoku{background-color:salmon;}
.kyushuu{background-color:bisque;}
.okinawa{background-color:tomato;}
</style>

<script type="text/javascript">
 
document.write('<h2>北海道</h2>');
for (var i = 0; i < kenList.hokaidou.length; i++){
    document.write('<ul class="hokaidou">');
    document.write('<li>');
    document.write('No.' + kenList.hokaidou[i].number + '<br>');
    document.write('県名:' + kenList.hokaidou[i].ken + '<br>');
    document.write('県庁所在地:' + kenList.hokaidou[i].shozaiti);
    document.write('</li>');
    document.write('</ul>');
}
 
document.write('<h2>東北</h2>');
for (var i = 0; i < kenList.touhoku.length; i++){
    document.write('<ul class="touhoku">');
    document.write('<li>');
    document.write('No.' + kenList.touhoku[i].number + '<br>');
    document.write('県名:' + kenList.touhoku[i].ken + '<br>');
    document.write('県庁所在地:' + kenList.touhoku[i].shozaiti);
    document.write('</li>');
    document.write('</ul>');
}

document.write('<h2>関東</h2>');
for (var i = 0; i < kenList.kantou.length; i++){
    document.write('<ul class="kantou">');
    document.write('<li>');
    document.write('No.' + kenList.kantou[i].number + '<br>');
    document.write('県名:' + kenList.kantou[i].ken + '<br>');
    document.write('県庁所在地:' + kenList.kantou[i].shozaiti);
    document.write('</li>');
    document.write('</ul>');
}

document.write('<h2>甲信越・北陸</h2>');
for (var i = 0; i < kenList.koushin_hoku.length; i++){
    document.write('<ul class="koushin_hoku">');
    document.write('<li>');
    document.write('No.' + kenList.koushin_hoku[i].number + '<br>');
    document.write('県名:' + kenList.koushin_hoku[i].ken + '<br>');
    document.write('県庁所在地:' + kenList.koushin_hoku[i].shozaiti);
    document.write('</li>');
    document.write('</ul>');
}

document.write('<h2>東海</h2>');
for (var i = 0; i < kenList.toukai.length; i++){
    document.write('<ul class="toukai">');
    document.write('<li>');
    document.write('No.' + kenList.toukai[i].number + '<br>');
    document.write('県名:' + kenList.toukai[i].ken + '<br>');
    document.write('県庁所在地:' + kenList.toukai[i].shozaiti);
    document.write('</li>');
    document.write('</ul>');
}

document.write('<h2>近畿</h2>');
for (var i = 0; i < kenList.kinki.length; i++){
    document.write('<ul class="kinki">');
    document.write('<li>');
    document.write('No.' + kenList.kinki[i].number + '<br>');
    document.write('県名:' + kenList.kinki[i].ken + '<br>');
    document.write('県庁所在地:' + kenList.kinki[i].shozaiti);
    document.write('</li>');
    document.write('</ul>');
}

document.write('<h2>中国</h2>');
for (var i = 0; i < kenList.tyugoku.length; i++){
    document.write('<ul class="tyugoku">');
    document.write('<li>');
    document.write('No.' + kenList.tyugoku[i].number + '<br>');
    document.write('県名:' + kenList.tyugoku[i].ken + '<br>');
    document.write('県庁所在地:' + kenList.tyugoku[i].shozaiti);
    document.write('</li>');
    document.write('</ul>');
}

document.write('<h2>四国</h2>');
for (var i = 0; i < kenList.shikoku.length; i++){
    document.write('<ul class="shikoku">');
    document.write('<li>');
    document.write('No.' + kenList.shikoku[i].number + '<br>');
    document.write('県名:' + kenList.shikoku[i].ken + '<br>');
    document.write('県庁所在地:' + kenList.shikoku[i].shozaiti);
    document.write('</li>');
    document.write('</ul>');
}
 
document.write('<h2>九州</h2>');
for (var i = 0; i < kenList.kyushuu.length; i++){
    document.write('<ul class="kyushuu">');
    document.write('<li>');
    document.write('No.' + kenList.kyushuu[i].number + '<br>');
    document.write('県名:' + kenList.kyushuu[i].ken + '<br>');
    document.write('県庁所在地:' + kenList.kyushuu[i].shozaiti);
    document.write('</li>');
    document.write('</ul>');
}

document.write('<h2>沖縄</h2>');
for (var i = 0; i < kenList.okinawa.length; i++){
    document.write('<ul class="okinawa">');
    document.write('<li>');
    document.write('No.' + kenList.okinawa[i].number + '<br>');
    document.write('県名:' + kenList.okinawa[i].ken + '<br>');
    document.write('県庁所在地:' + kenList.okinawa[i].shozaiti);
    document.write('</li>');
    document.write('</ul>');
}
</script>
<address>Copyright &copy; 2010 <a href="http://faq.tank.jp/">web制作・ホームページ制作よくある質問</a> All Rights Reserved.</address>
</html>

表示確認⇒サンプルページへ