JSONで取得されるデータの中から、指定の要素を取り出したい

Question

JSONから指定の要素を取得する方法がよくわらかないので教えて頂きたいです。

具体的には下記のHTMLとajaxを使い、#titleにJSONのtitle要素を出力したいと考えています。

<p>title</p>
<div id="title"></div>
<hr>
<p>all</p>
<div id="all"></div>

<script>
function yt(){
var API_KEY = 'xxx';
var video_id = "6QNxsnfIP4E";
var url = 'https://www.googleapis.com/youtube/v3/videos?id='+video_id+'&part=snippet,contentDetails,statistics,status&key=' + API_KEY;
$.ajax({
    type: 'GET',
    url: url,
    dataType: 'json',
    success: function(data){

        // JSONの全てを出力→できた
        var all = JSON.stringify(data,null, "    ");
        $("#all").append(all);

        // JSONのtitleを出力→できない
        var title = all[1].snippet[2]; // ここで「【RIZIN2018】那須川天心VSメイウェザー（日本語実況）」を取得しているつもり
        $("#title").append(title);

    }
});
}
yt();
</script>

現状では上記HTMLの#allに下記JSONが出力されまして、この中で出力したいtitle要素とは、16行目の「【RIZIN2018】那須川天心VSメイウェザー（日本語実況）」です。これを、上記HTMLの#titleに出力したいというのが目的です。

{
	"kind": "youtube#videoListResponse",
	"etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/hhLVcZqdXMpUJ4VNRvNIK4ksjhE\"",
	"pageInfo": {
		"totalResults": 1,
		"resultsPerPage": 1
	},
	"items": [
		{
			"kind": "youtube#video",
			"etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/DyMLz_rApqVo62Sd3TgO_JQ7AR4\"",
			"id": "6QNxsnfIP4E",
			"snippet": {
				"publishedAt": "2018-12-31T14:49:46.000Z",
				"channelId": "UCWk7Qqskj-_uWJqhNMlRVuQ",
				"title": "【RIZIN2018】那須川天心VSメイウェザー（日本語実況）",
				"description": "",
				"thumbnails": {
					"default": {
						"url": "https://i.ytimg.com/vi/6QNxsnfIP4E/default.jpg",
						"width": 120,
						"height": 90
					},
					"medium": {
						"url": "https://i.ytimg.com/vi/6QNxsnfIP4E/mqdefault.jpg",
						"width": 320,
						"height": 180
					},
					"high": {
						"url": "https://i.ytimg.com/vi/6QNxsnfIP4E/hqdefault.jpg",
						"width": 480,
						"height": 360
					}
				},
				"channelTitle": "さまど.",
				"categoryId": "20",
				"liveBroadcastContent": "none",
				"localized": {
					"title": "【RIZIN2018】那須川天心VSメイウェザー（日本語実況）",
					"description": ""
				}
			},
			"contentDetails": {
				"duration": "PT3M2S",
				"dimension": "2d",
				"definition": "hd",
				"caption": "false",
				"licensedContent": false,
				"projection": "rectangular"
			},
			"status": {
				"uploadStatus": "processed",
				"privacyStatus": "public",
				"license": "youtube",
				"embeddable": true,
				"publicStatsViewable": true
			},
			"statistics": {
				"viewCount": "1077124",
				"likeCount": "2635",
				"dislikeCount": "509",
				"favoriteCount": "0",
				"commentCount": "4092"
			}
		}
	]
}

宜しくお願いします！

Answer 1

all.items[0].snippet.title

Comments

[beer]

var title = all[1].snippet[2];
↓
var title = all.items[0].snippet.title;
ですよね？
これではできませんでした。
もし何かございましたらお願いします。

[kei344]

console.logで確認してみては？もしくは省略しないでJSONを提示してください。

【デバッグに大活躍! JavaScriptのconsole.logで値を表示しよう | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/27205

[beer]

省略しないJSONを質問文に追記致しました。
よろしければご査収ください。

最後にご指摘のコンソールエラーはこちらですから、恐縮ですがやはり指定方法の何かが違うように思います。
TypeError: all.items is undefined

[kei344]

JSON.stringify(data,null, " ");をdata;に。で、$("#all").append(JSON.stringify(all,null, " "));に。
文字列にしているので取り出せません。

[beer]

できました。なるほど、気を付けます。どうもありがとうございました。