Vue-CLIでaxiosを使って取得したJSON形式のデータをUTC→JSTに変換

Question

<template>
    <div id="app">
        <ul>
            <tr v-for="user in users" v-bind:key="user.id" type="number">
            <th scope="row" >データ：{{ user.****| moment }} </th>
           </tr>

        </ul>
    </div>
</template>

<script>
import axios from 'axios';

export default {

    data() {
    return {
        users: null,
      
    };
  },


  created: function(){
    axios.get('https://api.****/json',{
        params:{
            ****: '****',
            ****: '****',
            ****: '****'

        }
    })
    .then(response =>  (this.users = response.data))
    .catch(function(error){
        console.log(error)
    })
},
    filters: {
        moment: function (date) {
            return moment(date).format('LTS');
        }
    },
}  
</script>

   {
      "results":
      {
        " ****":"7:27:02 AM",
        "****":"5:05:55 PM",
        "****":"12:16:28 PM",
        "****":"9:38:53",
      },
       "status":"OK"
    }

発生している問題・エラーメッセージ

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

Moment.jsを使用してみたのですが、GoogleChromeデベロッパーツールで上記のエラーが発生し表示できませんでした。

エラーメッセージを翻訳すると「提供された値は、認識されているRFC2822またはISO形式ではありません。」ということで変換する必要があるということはわかるのですが、メッセージに表示されているhttp://momentjs.com/guides/#/warnings/js-date/なども参考にしてみたのですが、変換の仕方がわかりません。

前提・実現したいこと

Vue-CLIのプロジェクトでaxiosを使ってAPIからJSON形式の外部データを取得し、データ内に含まれてている「5:05:55 PM」という時刻を「UTC/協定世界時」から「JST/日本標準時」への変換を行いたいです。

Comments

[DaikiOjima]

> Moment.jsを使用してみたのですが、エラーが発生し表示できませんでした。

こちら、実際に試してたコードと発生したエラーの内容が具体的に記載されていると回答が得られやすいかと思います。

Answer 1

発生しているエラーメッセージに対する解決策ですが、
5:05:55 PM とう時刻文字列をmomentに渡す際に第2引数にフォーマット情報を渡すことで、正しくパースすることができます。

今回の例だと次のようになります。

moment('7:27:02 AM', 'hh:mm:ss a')

https://momentjs.com/docs/#/parsing/string-format/

これが解決した後は、手動で+9時間する、または moment-timezone を使ってタイムゾーンの変換を行うことになるかと思います。

Comments

[kazu0905]

丁寧なアドバイスありがとうございます。

時刻文字列をmomentに渡す際に第2引数にフォーマット情報を渡し、「moment.utc('7:27:02 AM', 'hh:mm:ss a').local().format();」のような形にすると、「UTC/協定世界時」から「JST/日本標準時」への変換ができました。