#はじめに
業務上でブラウザ状にちょっとした動きをつけるようなことはよくあるのですが最近珍しくjsonを使った非同期通信をやらせてもらえる機会があったので業務の内容とは別でjsonから取得したオブジェクト配列を地方ごとにまとめてみる処理をしてみました。
画面状には地域別で分けた各オブジェクトのタイトルを出力する仕様です。
area.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>都道府県ごとにタイトルを表示する</title>
</head>
<body>
<header>
</header>
<div class="container">
<section>
<h3>北海道</h3>
<ul id="hokkaido">
</ul>
</section>
<section>
<h3>東北地方</h3>
<ul id="tohoku">
</ul>
</section>
<section>
<h3>関東地方</h3>
<ul id="kanto">
</ul>
</section>
<section>
<h3>中部地方</h3>
<ul id="chubu">
</ul>
</section>
<section>
<h3>近畿地方</h3>
<ul id="kinki">
</ul>
</section>
<section>
<h3>中地地方</h3>
<ul id="chugoku">
</ul>
</section>
<section id="shikoku">
<h3>四国地方</h3>
<ul id="chugoku">
</ul>
</section>
<section>
<h3>九州地方</h3>
<ul id="kyushu">
</ul>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/area.js"></script>
</body>
</html>
area.json
[
{
"title": "タイトル１",
"parent_category": "architecture",
"category_slug": "production",
"address": "北海道",
},
{
"title": "タイトル２",
"parent_category": "civil",
"category_slug": "train",
"address": "北海道",
},
{
"title": "タイトル3",
"parent_category": "civil",
"category_slug": "architecture",
"address": "北海道",
},
{
"title": "タイトル4",
"parent_category": "car",
"category_slug": "bus",
"address": "広島県",
}
{~}
{~}
{~}
{~}
];
area.js
$(function(){
const hokkaido_area = [];
const hokkaido_pref = ["北海道"];
const tohoku_area = [];
const tohoku_pref = ["青森県", "岩手県", "宮城県", "秋田県", "山形県", "福島県"];
const kanto_area = [];
const kanto_pref = ["茨城県","栃木県","群馬県","埼玉県","千葉県","神奈川県","東京都"];
const chubu_area = [];
const chubu_pref = ["新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県"];
const kinki_area = [];
const kinki_pref= ["三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県"];
const chugoku_area = [];
const chugoku_pref = ["鳥取県","島根県","岡山県","広島県","山口県"];
const shikoku_area = [];
const shikoku_pref = ["徳島県","香川県","愛媛県","高知県"];
const kyushu_area = [];
const kyushu_pref = ["福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"];
$.ajax({
type: "GET",
url: "/json/area.json",
dataType: "json",
})
.done(function (data) {
$.each(data, function(index, value){
if (hokkaido_pref.includes(value.address)){
hokkaido_area.push(value);
$("#hokkaido").append(
`<li>${value.title}</li>`
);
} else if (tohoku_pref.includes(value.address)){
tohoku_area.push(value);
$("#tohoku").append(
`<li>${value.title}</li>`
);
} else if (kanto_pref.includes(value.address)){
kanto_area.push(value);
$("#kanto").append(
`<li>${value.title}</li>`
);
} else if (chubu_pref.includes(value.address)){
chubu_area.push(value);
$("#chubu").append(
`<li>${value.title}</li>`
);
} else if (kinki_pref.includes(value.address)){
kinki_area.push(value);
$("#kinki").append(
`<li>${value.title}</li>`
);
} else if (chugoku_pref.includes(value.address)){
chugoku_area.push(value);
$("#chugoku").append(
`<li>${value.title}</li>`
);
} else if (shikoku_pref.includes(value.address)){
shikoku_area.push(value);
$("#shikoku").append(
`<li>${value.title}</li>`
);
} else if (kyushu_pref.includes(value.address)){
kyushu_area.push(value);
$("#kyushu").append(
`<li>${value.title}</li>`
);
}
});
}).
fail(function () {
window.alert("通信に失敗しました")
});
})
これで一応出力は出来ました。都道府県をeachさせながらincludes関数で一致するオブジェクトを地方ごとの配列に組み直す処理です。
配列の初期化等の記述だけで記述量が多くなったんですがもっとこうすればみたいなことがありましたら優しく教えてくださいませ。
よろしくお願いいたします。