複数のJSONデータをマージするにはまず、$.when().then()を使用して
$.when()・・・JSONデータが２つとも取得できたら、
then・・・を実行する
という非同期処理を行います。そしてthenの中でデータを結合します。
取得できなかった場合の処理は省略可ですが、記述しておいたほうが良いかと思います。
$.when(
$.getJSON(‘JSONデータのURL その1’),
$.getJSON(‘JSONデータのURL その2’)
)
.then((data01, data02) => {
// JSONが取得が完了したら下記を実行
const combinedResults = […data01, …data02]; //データを連結
// 処理
}, () => {//JSONが取得できなかった場合の処理});
複数の配列をひとつに結合
複数の配列をひとつに結合するにはES6のスプレッド演算子（…）を使うと便利ですよ！
const combinedResults = […data01, …data02, …data03];
その他、concatを使って結合する方法もあります。
const combinedData = data01.concat(data02,data03);
WP REST APIで投稿(post)と固定ページ(page)のデータを結合する例
せっかくなので具体例書いておきますね…
WordPressのREST APIで提供されている投稿と固定ページのJSONデータを取得して結合する例です。
検索キーワードを元に結果を表示する想定です。
jQuery
getResults() {
$.when(
$.getJSON('https://illustswitch.com/wp-json/wp/v2/posts?search=' + this.searchInput.val()),
$.getJSON('https://illustswitch.com/wp-json/wp/v2/pages?search=' + this.searchInput.val())
).then((posts, pages) => {
let combinedResults = [...posts[0], ...pages[0]];
$('#results').html(`
${combinedResults.length ? '<ul class="link-list min-list">' : '<p>No general information matches that search.</p>'}
${combinedResults.map(post => `<li><a href="${post.link}">${post.title.rendered}</a></li>`).join('')}
${combinedResults.length ? '</ul>' : ''}
`);
this.isSpinnerVisible = false;
}, () => {
$('#results').html('<p>エラーが発生しました。</p>');
});
}
HTML
<input id="input" type="text" placeholder="キーワードを入力してください"> <div id="results"></div>
ついでに投稿（post）だけの場合（JSONデータが1つの場合）
$.getJSON( JSONデータのurl , (data) => {//処理} )
jQuery
$.getJSON('https://illustswitch.com/wp-json/wp/v2/posts?search=' + $('#input').val(), posts => {
$('#results').html(`
${posts.length ? '<ul>' : '<p>結果が見つかりませんでした。</p>'}
${posts.map(post => `<li><a href="${post.link}">${post.title.rendered}</a></li>`).join('')}
${posts.length ? '</ul>' : ''}
`);
});
