$.getJSONで取得した複数のJSONデータを結合する【jQuery+ES6】

$.getJSONで取得した複数のJSONデータを結合する【jQuery+ES6】

複数の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>' : ''}
    `);
});

この記事をシェア

Categories

Profile

兵庫県神戸市でWEB/DTPまわりのフリーランスをしています。
当ブログは主に業務で出会った諸々の備忘録です。

イラストスイッチ