複数のJSONデータをマージするにはまず、$.when().then()を使用して
$.when()・・・JSONデータが2つとも取得できたら、
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>' : ''} `); });
