Tanaka on Rails

行動・努力・俯瞰

json形式で送られたデータから新たに配列を作り直す方法

json形式でデータを受け取る

私はRuby on railsをバックエンドでVue.jsをフロントエンドとしてアプリケーション開発を行なっています。
Vueファイルの中でaxiosを使用してRailsでデータを呼び出すという形式を取っています。
Rails内で処理されたデータはjson形式で返されるのですが

[ { "id": 1, "name": "tanaka", "created_at": "2022-01-02T02:00:00.000Z", "updated_at": "2022-01-26T21:15:33.013Z"},
 { "id": 2, "name": "yamada", "created_at": "2022-01-05T05:00:00.000Z", "updated_at": "2022-01-26T21:15:33.016Z"}, 
 { "id": 3, "name": "kato", "created_at": "2022-01-11T03:00:00.000Z", "updated_at": "2022-01-26T21:15:33.021Z"},
 { "id": 4, "name": "sato", "created_at": "2022-01-26T21:17:00.738Z", "updated_at": "2022-01-26T21:17:06.158Z" }, 
 { "id": 5, "name": "saito", "created_at": "2022-02-02T07:34:31.000Z", "updated_at": "2022-02-02T07:34:31.000Z" }]

というように配列の中に配列が入っているというケースもあります。

上記のケースは2022年の1月2日〜1月26日に作成されたデータ(created_at)です。 それぞれに名前(name)というカラムがあります。
このケースでcreated_atの期間を指定して、該当する期間に作成されたnameを取り出したいという時はどうすればいいのかかなり迷いました。

json形式のデータから新たに配列を作成する方法

ソリューションとしてfilterを使用します。

var fromDate = moment('2022-01-01').startOf('month').toISOString();  #moment.jsを使用
var endDate = moment('2022-01-01').endOf('month').toISOString();  #toISOString()でcreated_atの形式に合わせる
var all_users = this.user;  #userはjsonで受け取ったデータ
  
var january_users = all_users.filter(function(item, index){
  if ( item.created_at >= endDate && item.created_at >= fromDate ) return true;
});  #filterによってall_usersからif()内の日付の範囲(1/1~1/31)のデータを絞り込み
  
for( var i = 0; i < january_users.length; i++ ){
  console.log(january_users[i].name);
}  #january_usersのnameを一つづつ配列にしていきコンソールで表示

非常に荒いコードな気がするがとりあえずこれで1月に作成したUserの名前を取得することができます。

参考

www.yoheim.net

www.servernote.net

hagure-m.hateblo.jp