ドラマー

複数の外部WordPress の最新記事を取得し、更新日でソートして降順に並べる

何ができるか

複数の外部ブログの最新記事を取得し、更新日でソートして降順に並べられる

背景

カテゴリが異なるサイトの更新情報を、それぞれのWordPress 記事として投稿している。大本のサイトでは、全情報を表示できるようにしたい。なおかつ、時系列でソートしたい。

技術情報

  • jQuery の$.getJSON(url, function(results){…}) で各店のWordPress ブログ記事を取得
    • getJSON()は非同期通信なので、データ取得後にHTML の描写を行うようにする
  • 取得したJSON データで必要なものをallArticles.push() で格納
    • 配列”allArticles” にオブジェクトを追加している
  • 全データ取得後、underscore.js を使い、allArticles をsortBy() で時系列降順にソート
    • 各店のJSON 読み込みにばらつきがあるので、setTimeout() で2秒の待機時間を付けている
    • allArticles をHTML として書き出す

配列を指定した項目でソートする

事前準備

jquery および、underscore.js を事前に読み込んでおく

underscore.js のsortBy() を使って、数字を降順に並べる

出力結果

year を比較して、降順に並び変わった

JavaScript で、複数の外部WordPress の最新記事を取得し、更新日でソートして降順に並べる

HTML

JavaScript

解説

  • getBlogInfo() で指定されたWordPress のJSON を取得して、ブログ最新記事を変数に格納
  • showBlogInfo() で記事をHTML に書きだす
  • 取得した記事をソートするとき、配列”allArticles”が空だった時が一番作業が煮詰まった。
    jQuery.getJSON() が非同期通信するため、読み込みが終わっていないタイミングで配列を参照していたのが原因だった。
  • 取得した記事のソートはこの部分。”-item.datenum” のマイナスを記載すると、降順になる。

参考

sortBy()
http://www.elder-flower.com/blog/2015/04/sortby.html
sortBy() の使い方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください