質問: data.list; console.log(myList); }); // ★ ここらへんで array_merge みたいなことがしたいです ★ }); })(jQuery); ``` それぞれのAJAXから返ってくるデータは次のような形です。(簡略化しています) ``` { "list": [ { "image": "aaa.jpeg", "title": "新しいやつ", "date": "2019-03-17", }, ] } ``` 各オブジェクトのプロパティ名は両方とも同じです。 データの総数は古いほうが500件あまりで固定、新しいほうは5件あまりで今後増大していきます。 過去のデータと、新しいデータを一つのオブジェクトデータにマージし、 それをもとにフロントで色々する、といった感じです。 これら2つのデータは別々の管理システムから出力されており、 データのインポート/エクスポートの仕組みもないため、元ファイル自体をマージするということはできません。 (直接編集したところで次にシステムから出力された時に編集内容が上書きされる) PHPで言うところの `array_merge` みたいなことをして、一つのオブジェクトデータにしたいのですが、 どのようにすれば実現できますでしょうか。 皆様お知恵を貸してください。よろしくお願いいたします。
回答: > > それぞれのAJAXから返ってくるデータは次のような形です。(簡略化しています) > > 各オブジェクトのプロパティ名は両方とも同じです。 > > > 簡略化しすぎです。 何を簡略化したのですか? そして、マージしたい2つのJSONデータはどこに差異があるんですか? オブジェクトに単体でlistというプロパティがあるのって中々の変態ですね。 普通配列じゃないですか? つまり、他にもエラー理由やお知らせデータなんかも入ってくるんですか? これらもマージしなさいみたいな話になってくると、読み取りようがないので勘弁してください。 この辺の理由から回答者は色々想像を働かせて、当てずっぽうな回答をせざるを得ません。 良い質問ってのはどうしても技量が求められますので、駄目だったら色々追記してみてください。 どちらも下記のデータである事と想定します。 * オブジェクトのJSONであること * listプロパティ(中身は必ず配列)を所持している * list配列はオブジェクトの配列である * list配列内の各オブジェクトはプロパティ名等は統一されている > > `// ★ ここらへんで array_merge みたいなことがしたいです ★` > > > 無理、Ajaxは非同期です。 だからわざわざ`newList.done`とかやってるんです。 取っ掛かりは下記を勉強しましょう。 jQuery.when() で、複数の非同期処理を扱う jQuery.whenを使って両方のAjax通信が終わったタイミングで動かすにはこんな感じになるでしょう。 ``` $(function(){ var newList = getNewList(); var oldList = getOldList(); $.when(newList, oldList) .done(function(dataNew, dataOld){ var myListNew = dataNew.list; var myListOld = dataOld.list; // ここらへんでarray_mergeみたいなことがしたい }); ``` マージのやり方 JavaScriptはPHPより進んだオブジェクト指向言語ですので、 連想配列的な存在であるオブジェクト、配列、関数、文字列、数値、論理値は **全てプロパティやメソッドを所持**しています。 余談ですが、 JavaScriptは文字列・数値・論理値はプリミティブ値としても振る舞うので、 プロパティを参照した時だけ一時的にオブジェクトに変身し、 行の最後でプリミティブ値に戻るというヘンテコな動きをします。 ``` // PHPではインスタンス以外はプロパティやメソッドを所持していないのでエラーになる ('hoge,piko')->split(','); // なのでPHPではこうする explode(',', 'hoge,piko'); // JavaScriptではString型がメソッドを所持しているのでアクセスしても許される "hoge,piko".split(','); ``` JavaScriptの配列(Array型のインスタンス)は配列自身が色々とメソッドを所持しています。 例えば、配列AとBをマージするArray.prototype.concatというメソッドが最初から用意されているので、 配列のマージ結果が欲しいという場合はそれを実行するだけでおしまいです。 ``` var arr1 = [1, 2]; var arr2 = [3, 4]; console.log(arr1.concat(arr2)); // [1, 2, 3, 4] console.log(arr1); // [1, 2] <- arr1が破壊されないので安心して使えるね console.log(arr2); // [3, 4] <- こちらも無事 ``` PHPが配列操作の関数を沢山覚える事が力になるのと同様に、 JavaScriptは型が所持しているメソッドを沢山覚えるのが力になる言語です。 JavaScriptを本気でやるならメソッドに焦点を当てて学習してみてください。