Vue CLIでaxiosを使ってAPIから取得したJSONファイル内の特定の要素の表示、もしくは削除

Question

<template>
    <div id="app">
        <button v-on:click="call_api()">表示する</button>
        <div v-for="user in users" :key="user.id">
　　　　<span><b>リスト：{{ user.list1 | moment }} </b></span>
　　　　</div>
    </div>
</template>

<script>
import axios from 'axios';
import moment from 'moment';

export default {

    data() {
    return {
        users: [],

    };
  },


  methods:{
      call_api: function() {
             this.error_message = "";
             axios.get('https://api.****/json',{
              params:{
                  ****: ****,
                  ****: ****,
                  date: ****,
                }
            })    
            .then(response =>  (this.users = response.data))
            .catch(error => {
                console.log(error)
                this.errored = true;
                this.error_message = error;

            })

        }
  },
    filters: {
        moment: function (data) {
            return moment.utc(data, 'hh:mm:ss a').local().format('LTS');
        }
    }
}
</script>

    {
      "results":
      {
        "list1":"7:27:02 AM",
        "list2":"5:05:55 PM",
　　　　 "list3":"9:38:53",
        "list4":"5:05:55 PM",
      },
       "status":"OK"
    }
  

###実現したいこと

リスト：{{ user.list1 }}

Vueインスタンスの要素を呼び出し時に、「リスト："7:27:02 AM"」のみを表示させたい。

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

Vue CLIでaxiosを使ってAPIから取得したJSONファイル内の特定要素を表示する際に、

{{ user.list1 }}

Vueインスタンスの要素を呼び出したのですが、JSONファイル内の「"status":"OK"」が時刻として変換されて、アプリ上では「リスト：Invalid date」と表示されてしまいます。

この「"status":"OK"」、「リスト：Invalid date」という要素を削除する方法がわかりません。もしくは表示しないようにする方法がわかりません。

試したこと

調べてみると、配列の要素削除はsplice()を使うという記事がありましたが、イマイチ使い方がわからず、特定要素を削除できませんでした。

Answer 1

<template>
    <div id="app">
        <button v-on:click="call_api()">表示する</button>
        <div v-for="user of users" :key="user" class="user">
        </div>
        <div>日の出時間：{{users.sunrise | moment}}</div>
　　　　
　　　　
    </div>
</template>

<script>
import axios from 'axios';
import moment from 'moment';

export default {

    data() {
    return {
        users: [],

    };
  },


  methods:{
      call_api: function() {
             this.error_message = "";
             axios.get('https://api.****/json',{
              params:{
                  ****: ****,
                  ****: ****,
                  date: ****,
                }
            })    
            .then(response =>  (this.users = response.data.results))
            .catch(error => {
                console.log(error)
                this.errored = true;
                this.error_message = error;

            })

        }
  },
    filters: {
        moment: function (data) {
            return moment.utc(data, 'hh:mm:ss a').local().format('LTS');
        }
    }
}
</script>

    {
      "results":
      {
        "list1":"7:27:02 AM",
        "list2":"5:05:55 PM",
　　　　 "list3":"9:38:53",
        "list4":"5:05:55 PM",
      },
       "status":"OK"
    }

コード的には多少変なところがありますが、これだとJSONファイルの「"status":"OK"」は表示されず、「result」の「"list1":"7:27:02 AM",」の時間のみが表示されました。

Answer 2

レスポンスをusersに代入している部分を変えれば行けそうです。

before

.then(response =>  (this.users = response.data))

after

<template>
    <div id="app">
        <button v-on:click="call_api()">表示する</button>
　　　　 <span><b>リスト：{{ user| moment }} </b></span>
    </div>
</template>
export default {
data() {
    return {
        user: null,
    };
  },
}

// api取得時に整形してthis.user入れます
.then(response =>  {
  const user = response.data.results.list1
  this.user = user
})

12/14追記

momentで与えられた時間をフォーマットする

filters: {
     moment: function (date) {
        const today = new Date()
　　　　　const time = date.split(':');
　　　　　const seconds = time[2].split(' ')[0]
        const timeObj = {
           years: today.getFullYear(), 
           months: today.getMonth(),
           days: today.getDay(), 
           hours: time[0], 
           minutes: time[1], 
           seconds: seconds
        }
        const formattedTime = moment(timeObj).format('YYYY/MM/DD HH:mm:ss')
        return formattedTime
      }
  }

Comments

[kazu0905]

修正してみましたが「TypeError: response.data.map is not a function」というエラーが発生してしまいました。

[infratoweb]

すみません、mapは配列に対してしか使えないので、apiの返り値がオブジェクトということですね。

回答を修正したので試してみてください

[kazu0905]

修正し試してみましたが、今度はJSONファイルのデータが表示されず、「{{user | moment }}」で表示すると「Invalid date」と表示されます。

[infratoweb]

それは、momentの問題ですね。

以下のコードに対して``7:27:02 AM``のデータが渡っており正しく変換できてないように見えます。
7:27:02 AMをmomentが読み取れる形に変換する必要があります。回答に追加しました

```
moment: function (data) {
return moment.utc(data, 'hh:mm:ss a').local().format('LTS');
}
```

[kazu0905]

「momentで与えられた時間をフォーマットする」を試してみましたが、デベロッパーツールで「TypeError: Cannot read property 'split' of null」と表示されてボタン要素などが表示されなくなってしまいました。