creonメモ

コーディングやデザインの作業メモなど

jsonデータをソートしたりレコード選択する

f:id:iriarj:20191226090347j:plain 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など使うとソート済みのデータで回せます。