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の名前を取得することができます。