ionicを試す １２日目 配列や連想配列のコピー
前回はピザのトッピング注文テーブルに色々改善点を見つけたところで終了しています。
今回は、これらの問題を解決あるいは設計自体の見直しで妥協できる内容にして見たいと思います。
前回出た問題点
---------------------------------------------------------------
１．メニューのチェックボックスをオン・オフさせるとオーダーの項目が際限なく増える
(今回は1アイテムは一度だけオーダーできることにしたい)
２．オーダーの項目のチェックボックスとメニューのチェックボックスが連動している
(前回指摘の問題)
３．生地が複数選べるのはおかしい。ソースも一つのみ選択にしたい
４．メニューは並び順になっているのにオーダーの順番がバラバラ
５．オーダー側のチェックを外すとオーダーからアイテムが削除され、メニューのチェックも外したい
６．出来れば生地やソース、トッピングなどのカテゴリー別に並べたい
---------------------------------------------------------------
まず、2番目を以下のような手法で対応します。
・メニュー配列からコピーしたい配列の要素(この場合、連想配列)を文字列にする
・その文字列を元に新しい要素(この場合、連想配列）を作る
・こうして作った（しがらみのない）要素をオーダー配列の末尾に付け加える
単純な命令ですので直接ソースコードを示します。
"home.page.ts"
------------------------------------------
//文字列化して
let strObj = JSON.stringify(this.Menu[index]);
//その文字列から新規にオブジェクトを作成して
let tmpObj = JSON.parse(strObj);
//そのオブジェクトをOrder配列の末尾に追加
this.Order.push(tmpObj);
------------------------------------------
よく使う事になると思いますが、VisualStudioCodeで"JSON."と大文字で入力すると入力候補で出てきますので、使うのは難しくないと思います。
(let は変数の宣言に使います。）
出番は少なくないと思いますので是非覚えてください。
・JSON.stringify (オブジェクト) がオブジェクトを文字列にする
・JSON.parse(文字列) が文字列をオブジェクトにする
※JSON.stringify(オブジェクト, null, 2) と言う書き方をするとインデントと改行付きで文字列を出力してくれるので読みやすくなります。以下のサイトをご覧ください。
mdn web docs JSON.stringify()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
次回は、問題１．と３．の問題を解決します。
短いですが、ここまで
