複数のjsonをマージして日付でソートする

複数のブログから記事一覧をjson形式で取得して、マージ後に日付でソートして表示するという実装をする機会があったので、実装方法をメモ。

サンプルコード

以下の2つのjsonを使用します。

data1.json

{
	"article":[
		{
			"title":"data1の記事A",
			"date":"2019/11/1"
		},
		{
			"title":"data1の記事B",
			"date":"2019/10/25"
		},
		{
			"title":"data1の記事C",
			"date":"2019/10/12"
		}
	]
}

data2.json

{
	"article":[
		{
			"title":"data2の記事A",
			"date":"2019/10/28"
		},
		{
			"title":"data2の記事B",
			"date":"2019/10/8"
		},
		{
			"title":"data2の記事C",
			"date":"2019/9/30"
		}
	]
}

HTMLに出力するエリアを用意します。

<div id="sample"></div>

jQueryで2つのjsonを取得して、マージ・ソートを行った後に出力します。

$(function() {
	// json取得
	var getJson = $.when (
		$.getJSON('data1.json?' + parseInt((new Date)/1000), function(data1) {}),
		$.getJSON('data2.json?' + parseInt((new Date)/1000), function(data2) {})
	);
	// json取得後
	getJson.done(function(data1, data2) {
		// jsonのマージ
		var data = data1[0]['article'].concat(data2[0]['article']);
		// 日付でソート
		data.sort(function(a, b) {
			if (new Date(a.date) > new Date(b.date)) {
				return -1;
			}
			if (new Date(a.date) < new Date(b.date)) {
				return 1;
			}
			return 0;
		});
		// 挿入する要素を作成
		var ins = '<ul>';
		for (var i = 0; i < data.length; i++) {
			ins += '<li>';
				ins += '<span class="date">' + data[i].date + '</span>';
				ins += '<span class="title">' + data[i].title + '</span>';
			ins += '</li>';
		}
		ins += '</ul>';
		$('#sample').append(ins);
	});
});

複数のjsonをマージして日付でソートするデモページ