jQueryでオブジェクトから情報を取り出してウェブサイトに表示したい。

Question

こんにちは。動画サイトvimeoのAPIから、
チャプターの情報を取得して、ワードプレス上に表示したいと思っています。
vimeoAPIでは、

This method gets the chapters of the video as an array.
Each chapter object looks like this:
{
"startTime": 15,
"title": "Chapter Title",
"index": 1
}
getChapters()　Returns　Promise <array, Error>

と書かれており、オブジェクトが格納されているんだと解釈して、

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<div id="edit_area"></div>
<script>
$(function() {
	// プレーヤーのオプション設定
	var iframe = document.querySelector('iframe');
	var player = new Vimeo.Player(iframe);
	player.getChapters().then(function(chapters) {
	var chapter = chapters.title ;
	document.getElementById('edit_area').innerHTML = chapter ;
}).catch(function(error) {
	switch (error.name) {
		case 'UnsupportedError':
		// Autopause isn't supported by the current player or browser
		break;
		default:
		// Some other error occurred
		break;
	}
});
</script>

など、色々と試してみましたが、
「undefined」や「<Object,object>」としか表示されません。
何が間違っているのでしょうか？
ご教授よろしくお願いします。

Comments

[Eskee]

> 「undefined」や「<Object,object>」としか表示されません。

これは、何の変数をデバッグしたんでしょう？

[rakumath]

疎くて質問の答えになっていないかも知れませんが、
player.getChapters()で取得した変数chapters(の一部または全部)を、chapterに格納して、
document.getElementById('edit_area').innerHTML = chapter ;
で、<div id="edit_area"></div>に表示することでデバッグしています。

var chapter = chapters ;
document.getElementById('edit_area').innerHTML = chapter ;
とすると、[object Object],[object Object],[object Object]が出ます。
その後、
var chapter = JSON.stringify(chapters) ;
document.getElementById('edit_area').innerHTML = chapter ;
とすれば
[{"startTime":0,"title":"大問1番(1)","index":1},
{"startTime":51,"title":"大問1番(2)","index":2},
{"startTime":90,"title":"大問1番(3)","index":3}]
と出ることに気がつきました。

ここで止まっています。

[rakumath]

var chapter = JSON.stringify(chapters) ;
document.getElementById('edit_area').innerHTML = chapter[2][1] ;
とでもすれば取り出せるかな？
と思ったのですが、undefinedとなります。

Answer 1

This method gets the chapters of the video as an array.
Each chapter object looks like this:

(勝手訳)：動画のチャプターの配列を取得します。それぞれのチャプターは以下のようになっています：

---

とのことなので、配列として取り扱うのでは？

Comments

[rakumath]

お返事ありがとうございます！そうですね...配列ですね。
配列もオブジェクトもあまり分かっていないので、ごっちゃになっていました。

[Lhankor_Mhy]

ご解決ですか？

[rakumath]

いえ、
var chapter = JSON.stringify(chapters) ; document.getElementById('edit_area').innerHTML = chapter ; とすれば [{"startTime":0,"title":"大問1番(1)","index":1}, {"startTime":51,"title":"大問1番(2)","index":2}, {"startTime":90,"title":"大問1番(3)","index":3}] と出ることに気がつきました。 ここで止まっています。
var chapter = JSON.stringify(chapters) ; document.getElementById('edit_area').innerHTML = chapter[2][1] ; とでもすれば取り出せるかな？ と思ったのですが、undefinedとなります。

[Lhankor_Mhy]

JSON.stringify は配列やオブジェクトを文字列化するメソッドですので、ここで使うのは適切ではないです。

拝見する限り、配列やオブジェクトに関する理解が不足しているように見えますので、devtools の使い方を覚えて、console.logで値を書き出し、どのような構造になっているのかよく確認してみるのがいいかと思います。

chapters はオブジェクトの配列になっている、ということをまずご理解された方がいいでしょう。

[rakumath]

ありがとうございました。
devtoolというものを知らず、調べて使ってみて、構造がよく分かりました。
望みの結果を得ることが出来ました。

[Lhankor_Mhy]

お役に立てたようで何よりです