レコード一覧画面での動的なサブテーブル内データのソートについて

いつもお世話になっております。

当方において発表会などのイベント情報を管理するアプリ(以下、Aアプリ)を作成しておりまして、javascriptにて以下のように実装しています。

①Aアプリにおいてイベント一覧画面表示後に「イベント日時更新」ボタンを押下
②Aアプリの「イベント日時更新」ボタンを押下すると、Aアプリのそれぞれのレコードについて、レコード番号をキーにしてイベントの詳細が登録されているアプリ(Bアプリ)にデータを取りに行き(GET)、そのデータを加工した結果をAアプリのサブテーブルに格納する(PUT)。(Aアプリのサブテーブルのフィールドは、更新日時、イベント日時、イベント名などです。)

他スレッドにおいても同様の質問がありましたが、顧客よりサブテーブルの表示をイベント日時の昇順にできないかという要望があがっています。

技術的にAアプリのデータの取得は可能ですが、そのデータはjavascriptによる処理の開始前のデータであり、上記②において更新されたデータについては同一javascript内での並び替えは難しいのではと考えておりますが、認識は合っていますでしょうか。
(今後のことを考えて、DOMのデータ構造など、javascriptでの実装以外の箇所を修正することは避けたいと考えています)

サブテーブルへのレコードをpush時にキーとなる項目(今回はイベント日時)でpushの順番を制御できれば・・・とも考えたのですが、確認する限りできない可能性が高いと考えており、他にアイデアがございましたらお手数ですがご教示いただけると幸いです。

※②のPUTではレコードIDを指定していないためPUT前にデータがあった場合は全削除を行い、その後に対象データをPUTする流れとなります。

以上よろしくお願いいたします。

背景が見えないので、回答がずれてしまうかもしれませんが・・・、

Array.sort()関数を使うことで、並べ替えは可能です。詳細はMDN辺りをご参照ください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

 

例えば、APIのGETメソッドで対象のレコード群を取得します。

レコード群は配列で返ってくるので、for文やforEachでレコードをループし、

サブテーブルに格納するための配列を作成すると思います。

 

その配列に対しsort()関数を使って、

  

 someArray.sort(function(elementA, elementB) {

    if(new Date(elementA[‘イベント日時’].value) < new Date(elementB[‘イベント日時’].value)){

        return -1;

    } else {

        return 1;

    }

});

 

のようにしてみてはいかがでしょうか。

大西様

ご回答いただきありがとうございました。

ご認識は合っており、示していただいたロジックが参考になり助かっておりますが、念のためもう1点ご教示いただけたら幸いです。

Aアプリのサブテーブルに書き込む(PUT)前にご教示いただきましたロジックでソートしようと現在、試行錯誤しておりますが、ソート対象の配列としてJSON配列(連想配列)のソートも可能と考えてよろしいでしょうか(つまり、上記のコードでJSON配列上のvalue値でのソートも可能でしょうか。)

具体的な配列の構造は以下のとおりとなっています。

{“更新日”:{“type”:“DATE”,“value”:“2018-11-29”},

“イベント日時”:{“type”:“DATE”,“value”:“2018-12-01”},

“イベント名”:{“type”:“SINGLE_LINE_TEXT”,“value”:“Aイベント”}

}

上記の「イベント日時」valueのフィールド値でソートできたらと考えております。

お手数をお掛けいたしますが、どうぞよろしくお願いいたします。

連想配列は配列ではないのでsort()関数が効かず、

例えば連想配列が someObject という変数に入っているとして、

 

var newArray = [];

Object.keys(someObject).forEach(function(eachKey) {

    newArray.push({

        label: eachKey,

        value: someObject[eachKey]

    });

});

 

のようにしてから、

 

newArray.sort(function(elementA, elementB) {

     if (elementA.label < elementB.label) {

         return -1;

     } else {

         return 1;

     }

});

 

var newObject = {};

newArray.forEach(function(eachObject) {

    newObject[eachObject.label] = eachObject.value;

});

 

のように書いてあげる必要があります。

 

が、連想配列の配列であれば、連想配列のvalueを比較してソートすることが可能です。

 

ササッとコンソールで試してみた結果が上図ですが、ご参考になりますでしょうか。

大西様

度々の迅速なご回答ありがとうございました。

当方においても試行錯誤いたしましたが、ソートできることを確認いたしました。

この度は大変お世話になりました。

今後ともよろしくお願いいたします。

 

 

持田様

 

無事に解決されましたようで何よりでございます。

関連レコード表示で対応しきれない場合など、サブテーブルのソートロジックは汎用性が高そうですね。

大西様

色々、ありがとうございます。

はい、当方で扱っている案件ではソート自体は求められていないケースも多いですが、ロジック的には応用できるケースが多いと思います。

以上よろしくお願いいたします。