前回の記事はこちら
ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。
第7回目である今回は、同じ商品を二つ買った場合でも、まとめて表示されない問題について解決します。
こちらのURLで、完成版のアプリを実際に操作することができます
https://l08084.github.io/ionic-sample-shopping-app/www
github.com
バージョン情報
Angular（JavaScriptのWebフレームワーク）ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使っている
- ionic-angular@3.9.2
- Angular@5.2.10
- Google Chrome バージョン: 60.0.3112.113
解決したい問題
今回することのイメージ
現在のアプリ（AS IS）だと、同一の商品を3個購入した場合は、そのままレジ画面に3列分表示されてしまうという問題があります。それを、同一の商品を複数件購入した場合は、1列でまとめて表示するように、コードを改修します。
実装
複数個の商品オブジェクトをまとめて一つにする、groupByメソッドを以前の回で作ったサービスクラスProductProviderに追加します。
src/providers/product/product.ts:
@param{Product[]}
@returns
groupBy(productList: Product[]): Product[] {
const group = productList.reduce((result: Product[], current: Product) => {
const element = result.find(p => p.id === current.id);
if (element) {
element.quantity += 1;
} else {
result.push(current);
}
return result;
}, []);
return group;
}
}
上記のgroupByメソッドをカート画面の初期表示時に呼び出す
src/pages/cart/cart.ts:
this.productList = this.productProvider.groupBy(result);
商品が複数個になった場合の価格の表示については、カート画面のテンプレートファイル側で「商品の1個あたりの値段 * 数量」の計算をすることで対応している（あまりテンプレート側で計算とかをするのはよくないと思うので、今後改善していきたい....）
src/pages/cart/cart.html:
<div class="price">￥{{product.price * product.quantity}}</div>
ここまで書くと最初の図のTO BEのイメージ通り、同じ商品を複数購入した場合は、まとまって表示されるはずである。
余談
今回のような、”あるプロパティが同じ複数のオブジェクトをまとめて一つにする処理”は、自分にとっては鬼門で、本件と同様の問題が発生した時にまずいコードを書いてしまったことがある（以前書いたまずいコードについては、こちら）。
今回は、下記のサイトを参考にメソッドを書いた。（「SQLのgroup byのように集計する」という的確な表現だったり、説明がわかりやすい記事でとても参考にさせていただいた）
参考サイト
JavaScript オブジェクト配列をsqlのgroup byのように集計する
次回の記事
