jsonデータをソートしたりレコード選択する
CMSやフレームワークを使えない状態で詳細ページ同士でリンクをつなげる必要があって、フロントで何とかしたメモ。
SEOやデータ追加更新時のリソースを考えると、フロント対処というところにツッコミがありますが
かなりのレアケースとは思いますが、せっかくなので記事にします。
こういうjsonがあったとして
[ { "name": "1月", "page": "sample1.html", "category": 2 }, { "name": "2月", "page": "sample2.html", "category": 1 }, { "name": "3月", "page": "sample3.html", "category": 3 }, { "name": "4月", "page": "sample4.html", "category": 1 }, { "name": "5月", "page": "sample5.html", "category": 1 }, { "name": "6月", "page": "sample6.html", "category": 2 }, { "name": "7月", "page": "sample7.html", "category": 3 }, { "name": "8月", "page": "sample8.html", "category": 3 }, { "name": "9月", "page": "sample9.html", "category": 2 } ]
カテゴリーが数値なのでちょっとわかりにくいかもしれません。
月別データだけど月によって違うカテゴリーになっていて、
今見ているページのカテゴリーと同じ月を優先的に表示したいとします。
// 変数jsonにjsonデータが代入されている想定 // 今のページを取得 const href = location.href; // jsonデータから、表示中のページレコードを検索 const now = json.filter(function (obj) { return (href.indexOf(obj.page) != -1); }).shift(); let list = json.filter(function(element) { // 表示中のページは含めない return (now.page != element.page); }).sort(function(a, b){ // 表示中のページと同じカテゴリーは最優先で表示 a.category = (now.category === a.category) ? 0 : a.category; b.category = (now.category === b.category) ? 0 : b.category; return a.category - b.category; });
これでlistをforEachなど使うとソート済みのデータで回せます。