2つのJSONファイルをAJAXで読み込んで、一つにobjectにマージする方法を教えてください

jQuery(ver3系)を用いて、外部ファイルを読み込むコードを次のように書きました。


(function($){
    'use strict';

    const LIST_PATH_NEW = "./data/list.json";
    const LIST_PATH_OLD = "./list.json";

    function loadJson(jsonPath)
    {
        var defer = $.Deferred();

        $.ajax({
            type : "GET",
            url : jsonPath,
            dataType: "json",
            success: defer.resolve,
            error: defer.reject
        });

        return defer.promise();
    }

    function getList(listPath)
    {
        return loadJson(listPath);
    }

    function getNewList()
    {
        return getList(LIST_PATH_NEW);
    }

    function getOldList()
    {
        return getList(LIST_PATH_OLD);
    }

    $(function(){
        var newList = getNewList();
        var oldList = getOldList();

        newList.done(function(data){
            var myList = data.list;
            console.log(myList);
        });

        oldList.done(function(data){
            var myList = data.list;
            console.log(myList);
        });

        // ★ ここらへんで array_merge みたいなことがしたいです ★

    });

})(jQuery);

それぞれのAJAXから返ってくるデータは次のような形です。(簡略化しています)


{
  "list": [
    {
      "image": "aaa.jpeg",
      "title": "新しいやつ",
      "date": "2019-03-17",
    },
  ]
}

各オブジェクトのプロパティ名は両方とも同じです。
データの総数は古いほうが500件あまりで固定、新しいほうは5件あまりで今後増大していきます。

過去のデータと、新しいデータを一つのオブジェクトデータにマージし、
それをもとにフロントで色々する、といった感じです。

これら2つのデータは別々の管理システムから出力されており、
データのインポート／エクスポートの仕組みもないため、元ファイル自体をマージするということはできません。
（直接編集したところで次にシステムから出力された時に編集内容が上書きされる）

PHPで言うところの array_merge みたいなことをして、一つのオブジェクトデータにしたいのですが、
どのようにすれば実現できますでしょうか。

皆様お知恵を貸してください。よろしくお願いいたします。

m.ts10806

2019/03/18 04:34

追加した結果、どのような内容になるのか、inputとoutputのデータをなるべく具体的に例示してください。結局はオブジェクトのマージなのでその角度から調べればある程度参考になりそうな情報は出てきそうですが、そのあたりは何か調べてみましたか？

行動規範の内容に同意します

回答1件

ベストアンサー

それぞれのAJAXから返ってくるデータは次のような形です。(簡略化しています)
各オブジェクトのプロパティ名は両方とも同じです。

簡略化しすぎです。
何を簡略化したのですか？
そして、マージしたい2つのJSONデータはどこに差異があるんですか？

オブジェクトに単体でlistというプロパティがあるのって中々の変態ですね。
普通配列じゃないですか？
つまり、他にもエラー理由やお知らせデータなんかも入ってくるんですか？
これらもマージしなさいみたいな話になってくると、読み取りようがないので勘弁してください。

この辺の理由から回答者は色々想像を働かせて、当てずっぽうな回答をせざるを得ません。
良い質問ってのはどうしても技量が求められますので、駄目だったら色々追記してみてください。

どちらも下記のデータである事と想定します。

オブジェクトのJSONであること
listプロパティ(中身は必ず配列)を所持している
list配列はオブジェクトの配列である
list配列内の各オブジェクトはプロパティ名等は統一されている

// ★ ここらへんで array_merge みたいなことがしたいです ★

無理、Ajaxは非同期です。
だからわざわざnewList.doneとかやってるんです。

取っ掛かりは下記を勉強しましょう。
jQuery.when() で、複数の非同期処理を扱う

jQuery.whenを使って両方のAjax通信が終わったタイミングで動かすにはこんな感じになるでしょう。

JavaScript
1$(function(){
2  var newList = getNewList();
3  var oldList = getOldList();
4
5  $.when(newList, oldList)
6    .done(function(dataNew, dataOld){
7      var myListNew = dataNew.list;
8      var myListOld = dataOld.list;
9
10      // ここらへんでarray_mergeみたいなことがしたい
11    });

マージのやり方

JavaScriptはPHPより進んだオブジェクト指向言語ですので、
連想配列的な存在であるオブジェクト、配列、関数、文字列、数値、論理値は
全てプロパティやメソッドを所持しています。

余談ですが、
JavaScriptは文字列・数値・論理値はプリミティブ値としても振る舞うので、
プロパティを参照した時だけ一時的にオブジェクトに変身し、
行の最後でプリミティブ値に戻るというヘンテコな動きをします。

// PHPではインスタンス以外はプロパティやメソッドを所持していないのでエラーになる
('hoge,piko')->split(',');

// なのでPHPではこうする
explode(',', 'hoge,piko');

// JavaScriptではString型がメソッドを所持しているのでアクセスしても許される
"hoge,piko".split(',');

JavaScriptの配列(Array型のインスタンス)は配列自身が色々とメソッドを所持しています。
例えば、配列AとBをマージするArray.prototype.concatというメソッドが最初から用意されているので、
配列のマージ結果が欲しいという場合はそれを実行するだけでおしまいです。

JavaScript
1var arr1 = [1, 2];
2var arr2 = [3, 4];
3
4console.log(arr1.concat(arr2));
5// [1, 2, 3, 4]
6
7console.log(arr1);
8// [1, 2] <- arr1が破壊されないので安心して使えるね
9
10console.log(arr2);
11// [3, 4] <- こちらも無事