jQueryで、JSON実行によって生じた値を、その後に取得する方法はありますか？

Question

下記でコメントアウトした➀➁の通りですが、ご説明させて頂きます。

まず初めに.Targetのdata-titleには「initial」が入っています。

この「initila」を➀のJSON実行によって、「動画のタイトル」に変更しています。

問題はここからで、➁のときに「動画のタイトル」をアラートしたいのですが、しかし「initial」がアラートされてしまいます。

そこでお聞きしたいのは、「動画のタイトル」をアラートする方法です。

そのようなことがもし可能でしたら、書き方を伝授して頂けませんでしょうか。
宜しくお願い致します。

<div data-title="initial" class="Target">
<img src="http://i2.ytimg.com/vi/araCtDiIs9M/0.jpg" alt="">
</div>


$('.Target').on('click', function() {
	
	/*
	* ➀JSONで動画のタイトルが取得され、「data-title」に入る
	*/
	
	var that = $(this);
	
	// APIでタイトル取得
	var API_KEY = 'xxx';
	var url = 'https://www.googleapis.com/youtube/v3/videos?id=araCtDiIs9M&part=snippet,contentDetails,statistics,status&key=' + API_KEY;
	$.ajax({
		type: 'GET',
		url: url,
		dataType: 'json',
		success: function(data){
			// タイトルを取得し「data-title」に入れる
			var title = data.items[0].snippet.title;
			$(that).attr('data-title', title);
		}
	});

	/*
	* ➁JSONで新しくなった「data-title」をアラートしたい
	*/
	var newtitle = $(that).attr('data-title');
	alert(newtitle); //ここで新しくなる前の「initial」がアラートされてしまう

});

ちなみに時間を置いてもう一度画像をクリックすれば、JSONの処理が終わっているので「動画のタイトル」がアラートされますので、➀には問題ございません。

Comments

[退会済みユーザー]

success の関数内に入れなかった理由はなんですか？

[beer]

ご指摘ありがとうございます。

まず➁のコードがだいぶ長いこと、そして➀だけでなく➀´や➀´´などの条件分岐を分けるためです。

と言いますのは、もし➁をsuccessの中に入れると、

if{➀➁}
elseif{➀´➁}
elseif{➀´´➁}

のようになってしまいます。同じコードである➁を何度も何度も書かなくてはなりません。

そこで➁をsuccessの中に入れずに、

if{➀}
elseif{➀´}
elseif{➀´´}
➁

のようにして、➁を書くのを１回で済ませられればと考えています。

[退会済みユーザー]

いやいや・・・
今の質問のコードからそれは取れませんから

同じコードになるなら関数化すればいいわけですが

[beer]

そうですね。関数化したあと、$(that)はどうやって取得したらいいのか知りたいです。

[kei344]

コードの全体像がわかりません。省略の仕方を改善してください。

Answer 1

jqueryのajaxはデフォルトで非同期通信しているため、
data-titleにセットされる前にalert(newtitle);が動いているのではないでしょうか。
オプションのasyncをfalseにすることで同期通信することで上から順番に処理されると思います。

$.ajax({
        type: 'GET',
        async : false,