始めに言っておきますが、今回実装したかったことはsplice()メソッドを使えば簡単にできました。
そちらの使用をお勧めします。
場面設定
AWS S3に常に更新される社員名簿JSONファイルが置いてあり、それを一定期間ごとにWeb側から読み込む。変更があった場合にそれをWebに反映させる。
やりたいこと
JavaScript内で既に保有している辞書型配列と、新規にJSONから読み込んだ辞書型配列に差分があればそれをpushする。
単純に辞書型配列を代入しても、Vue.js側から変更を認識できないため、Vueが管理可能な関数を使って実装します。
ex. push/pop/splice/等
push()/pop()による実装
社員情報はmembersという名前で既に保有しています。
存在の有無はincludesメソッドで判定します。employee_idにしたのは一意だからです。
- 新規配列に追加されたものを検知するため、元の配列と新規配列を比較して該当要素をpush()
axios.get('GET_URL?timestamp=${new Date().getTime()}',headers)
.then(response => {
res = response.data;
ids = []; //idのsetを作る。
app.members.forEach(member => {ids.push(member.employee_id)});
res.forEach(r => {
if(!ids.includes(r.employee_id)){
app.members.push(r); //Vueコンポーネントのmembers配列にpushする。
};
});
}).catch( error => { console.log(error); });
このような形で実装したのですが、pushとかpopって末尾しか扱えないから不便じゃん、と思いspliceについて調べているとどうやら配列が丸ごと置換できそうだとわかりました。最初からこれに気づくべきでした。
splice()による実装
app.members.splice(0);//配列を空にする
app.members.splice(0,0,...res);//index=0を起点,削除0,配列の中身を展開したもの
splice()の第3引数を配列自体にしてしまうと配列の配列になるらしく...による展開が必要です。
sample.js
var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']
epilogue
splice()だけでいいんでない？