【タブメニュー】$.ajaxを$.getJSONに書き換え

ajaxのjsonファイル読み込み部分、$.ajaxを$.getJSONに書き換えます。キャッシュの無効化にも対応させます。

html、CSS、jsonのコードは下記の記事と同様になります。

【タブメニュー】コンテンツをカテゴリーごとにソートして表示【ajax：json編】

ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。 コンテンツはajaxを利用してjsonファイル内のデータを読み込みます。

tech.brick-plan.jp

2019.08.24

jQuery書き換え前のjsonファイル読み込み部分のコードです。

$(function() {
	$.ajax({
		url: 'js/news.json',
		dataType: 'json',
		cache: false,
	}).done(function(data) {

続いて、jQuery書き換え後のjsonファイル読み込み部分のコードです。
$.ajaxの代わりに$.getJSONを記述します。$.getJSONはjsonファイルの読み込みが前提のため、$.ajaxの記述のようにdataType: ‘json’は指定しません。また、$.getJSONはcacheのオプションがないため、$.ajaxSetupにcache: falseを記述します。

$(function() {
	$.ajaxSetup({
		cache: false
	});
	$.getJSON('js/news.json')
	.done(function(data) {

最後にjQuery書き換え後の全てのコードです。

$(function() {
	$.ajaxSetup({
		cache: false
	});
	$.getJSON('js/news.json')
	.done(function(data) {
		var insertContents = '';
		var len1 = data.length;
		for(var i = 0 ; i < len1 ; i++) {
			var len2 = data[i].item.length;
			for(var j = 0 ; j < len2 ; j++) {
				insertContents += '<div class="news-content" data-category="';
				if(data[i].cat == 'お知らせ'){
					insertContents += 'catInfo">';
				}else if(data[i].cat == "イベント"){
					insertContents += 'catEvent">';
				}else if(data[i].cat == "採用ニュース"){
					insertContents += 'catRecruit">';
				}
				insertContents += '<p class="news-date">';
				insertContents += data[i].item[j].time;
				insertContents += '</p>';
				insertContents += '<p class="tags">';
				insertContents += data[i].cat;
				insertContents += '</p>';
				insertContents += '<p class="news-r">';
				if(data[i].item[j].link == ''){
					insertContents += data[i].item[j].article;
				}else{
					insertContents += '<a href="' + data[i].item[j].link + '"';
					insertContents += ((data[i].item[j].linkTarget == "true") ? ' target="_blank"' : '') + '>';
					insertContents += data[i].item[j].article;
					insertContents += '</a>';
				}
				insertContents += '</p>';
				insertContents += '</div>';
			}
		}

		var sortData = $('.news-date' , insertContents).sort(function(a,b) {
			if($(a).text() < $(b).text()) return 1;
			if($(a).text() > $(b).text()) return -1;
			return 0;
		});
		var insertContentsSort = '';
		$(sortData).each(function(){
			insertContentsSort += $(this).parent().prop("outerHTML");
		});

		var newsLink = $(".news_link li");
		var limit = 5;
		for(var i = 0 ; i < limit ; i++) {
			var limitNews = $(insertContentsSort)[i];
			$(limitNews).appendTo('.news-content-all').hide().fadeIn();
		}
		$(newsLink).click(function(){
			$(newsLink).removeClass("active");
			$(this).addClass("active");
			var btnFilter = $(this).attr('data-filter');
			if (btnFilter == 'catAll') {
				$(".news-content").remove();
				for(i = 0 ; i < limit ; i++) {
					limitNews = $(insertContentsSort)[i];
					$(limitNews).appendTo('.news-content-all').hide().fadeIn();
				}
			} else {
				$(".news-content").remove();
				for(i = 0 ; i < limit ; i++) {
					limitNews = $(insertContentsSort).filter('[data-category = "' + btnFilter + '"]')[i];
					$(limitNews).appendTo('.news-content-all').hide().fadeIn();
				}
			}
		});

	}).fail(function(jqXHR, textStatus) {
			var errorMessage = '';
			errorMessage += '<p>データの読み込みに失敗しました。';
			errorMessage += 'ステータスコード：' + jqXHR.status + '、';
			errorMessage += 'ステータス：' + textStatus + '</p>';
			$(errorMessage).appendTo('.news-content-all');
	});
});