vue.js勉強中です。axiosでYoutube Data APIを読み込む際、チャンネルの動画一覧をうまく参照できません

axiosでYoutube Data APIを読み込む際、チャンネルの動画一覧をうまく参照できません。
プレイリストのJSONデータは参照できます。

▼プレイリストの動画一覧を取得（うまくいっている）
https://jsfiddle.net/covarelax/ko6ukyca/56/

▼チャンネルの動画一覧を取得（これがうまくいかない）
https://jsfiddle.net/covarelax/0txdq3x6/18/

js
1console.log(error);

が実行されているので、JSONデータの読み込みがうまくいっていないのはわかるのですが、何が問題なのかわかりません；

参照しようと思っているJSONはこちらです。
https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCh8IKYgMvhCm2HRO4wkzaAw&key=AIzaSyBmVvwO9luHXM2AdzX5IlmUdnuxJ6-HXkA&maxResults=30

どなたか、回答いただけないでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

Chrome DevToolsのコンソールを確認すると、

js
1TypeError: Cannot read property 'videoId' of undefined

とあり、videoId を読み取れずにエラーがが起きていると判ります。
jsonを確認すると、 videoId は、 items.id.videoId にありますね。

json
1{
2    "kind": "youtube#searchListResponse",
3    "etag": "\"_gJQceDMxJ8gP-8T2HLXUoURK8c/JlsOv_T10V1hjL1uyRDPkCjqa6M\"",
4    "nextPageToken": "CB4QAA",
5    "regionCode": "JP",
6    "pageInfo": {
7        "totalResults": 179,
8        "resultsPerPage": 30
9    },
10    "items": [{
11            "kind": "youtube#searchResult",
12            "etag": "\"_gJQceDMxJ8gP-8T2HLXUoURK8c/jVWFsGjJa_4qGoTukqiOnkJ9HRU\"",
13            "id": {
14                "kind": "youtube#video",
15                "videoId": "Rjg0nsFrLoE"