月繰りカレンダーで、「Ajaxリクエストで取得した特定の値が存在する月で、直近のもの」をデフォルト表示月にしたい

Question

こんにちは。

Webページ内に月繰りカレンダーを表示させ、その中の日付欄にそれぞれAjaxリクエストによって外部APIから取得した値を表示させようとしています。

リクエストの結果、各々の日付に対して1つ、A, B, C のいずれかが返ってきます。
ここでデフォルトでの表示月を「Aが存在する直近の月」にしたいのですがうまいやり方がわかりません。。
「月ごとのリクエストを送り、Aが存在する月を見つけたらそこをデフォルトの表示月にする」という考え方で可能かと思うものの、具体的な方法が思いつかない次第です。
あるいはもっと良いやり方がありますでしょうか？

下記の要領で、現在の年月をデフォルト月として表示することには成功しています。
コード中”min”の部分を current_ym でなく”Aが存在する直近の年月”にできれば良いかと思っております。

var current_ym = new Date((new Date).getFullYear(), (new Date).getMonth(), 1);
var min = dateFormat(current_ym, 'api');
var max = dateFormat(new Date(current_ym.getFullYear(), current_ym.getMonth() + 1, 1), 'api');
var query = 'date_min=' + min + '&date_max=' + max; 
$.ajax({
	url: api_url + '?' + query,
	dataType: 'json',
	success: function(result_json) { 
		date_html(result_json);  //結果用html
	},
	error: function() { 
	}
});

function dateFormat(date, type) {
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var day = date.getDate();
	var hour = date.getHours();
	var min = date.getMinutes();
	month = ('0' + month).slice(-2);
	day = ('0' + day).slice(-2);
	hour = ('0' + hour).slice(-2);
	min = ('0' + min).slice(-2);
	var result = '';
	if (type == 'api') {
		// api 用のフォーマット
		result = year + month + day + '0000';
	} else {
		// 表示用のフォーマット
		result = year + delimiter + month;
	}
	return result;
}

api_url?date_min=min&date_max=maxにおいて、
minからmaxの間の日付でリクエストを送ることが可能となっています。

アドバイスのほどよろしくお願いします。

Answer 1

一番良いのは、「指定した日付の直近でAが存在する月」を返すAPIを作って
それを使うことのようにも思いますが、外部APIなので難しい、
というところでしょうか。

現状のAPIのままで実現するなら、以下のイメージでどうでしょうか。

案1(見つかるまでajax通信)

修正前

    success: function(result_json) { 
        date_html(result_json);  //結果用html
    },

修正後

    success: function(result_json) {
        if(containsA(result_json)) {  // TODO: containsAは、指定したjsonにAが含まれているかを判定する関数として実装する。
            date_html(result_json);  //結果用html
        else {
            // TODO: 月を一月進めて、再度APIをajaxで呼び出す。
        }
    },

この先Aが存在しない場合、というのも考慮が必要そうですが。

案2(まとめて取得し、必要な部分を再取得または絞り込み)

api_url?date_min=min&date_max=max
という形で指定できるのであれば、調べたい範囲(例えば６カ月分)をしていして、
その結果のjsonを解析して、それが何月かを調べることや、
さらにその結果をjavascript側で絞り込むことも、
できるのではないでしょうか？

そうすれば、
(1) Aがあるか調べたい期間を指定してajax呼び出し
(2) (1)の結果からAを含む月を見つけ、ajax呼び出し
の２回か、あるいは、
(1) Aがあるか調べたい期間を指定してajax呼び出し
その結果をjavascirpt側でAを含む直近の月だけに絞り込んで、 date_htmlに渡す。
の１回のajax呼び出しでも、結果を得ることができそうです。

Comments

[mcperry]

早速の回答ありがとうございます。
なるほど、successの中でさらにリクエストするということですね。
となると、月を進めるごとにajax()がどんどんネストされていくイメージでしょうか？
仮に6ヶ月分調べたい場合には、6回ajaxリクエストを送ることになりますか？
見当違いのことを言っていたらすみません。。
よろしくお願いします。

[eripong]

そうですね。
仮に6ヶ月分調べたい場合には、6回ajaxリクエストを送ることになります。
ただ、ajaxは非同期と思うので、スタックが積み重なるという意味でのネストには
ならないと思います。

ちょっと見落としていたのですが、
api_url?date_min=min&date_max=max
という形で期間指定できるのですね。
それを使った案を、回答に追記しておきました。

[mcperry]

eripongさま
理解いたしました。一定期間分まとめて取得してから処理していくという発想がありませんでした…ありがとうございます。
これで見通しが立ったので進めていけそうです。
丁寧なご回答、感謝いたします。