ionicを試す ２１日目（重要）jsonデータの扱いとPage.jsonのフィールド追加
投稿してから気づきましたが、こちらでjsonデータの扱い方をまだ書いて無かったので追加です。
プロジェクト直下の”src\app\"に"MyData"と言うフォルダを作り、そこに"Page.json"と"Book.json"を作りました。
＊＊＊＊＊重要＊＊＊＊＊
上記のファイルを"src\app\home\home.page.ts"でimportしてもエラーが出ます。
------------------------------------------------------------
モジュール './mydata/Page.json' が見つかりません。'--resolveJsonModule' を使用して '.json' 拡張子を持つモジュールをインポートすることをご検討ください。ts(2732)
------------------------------------------------------------
jsonデータを、そのままインポートするためには、プロジェクトフォルダ直下の"tsconfig.json"と言うファイルを少し変更して、"compilerOptions"内に以下の行を追加します。(15行目あたりです)
"tsconfig.json"
------------------------------------------
"lib": ["es2018", "dom"], ←追加ではないが末尾に","を付加
"resolveJsonModule": true, ←追加行
"esModuleInterop": true ←追加行
------------------------------------------
これでjsonデータをそのままインポートできます。
"src\app\home\home.page.ts"
---------------------------------------------------------------
import BookData from 'src/app/MyData/Book.json';
import PageData from 'src/app/MyData/Page.json';
---------------------------------------------------------------
データの内容は、下記リンクを参照してください。
https://ncode.syosetu.com/n7839ho/40/
追加終了。
ステータスチェンジのパターン等を考えていて、どうにもPage.jsonのフィールドが足りないという結論になりました。
カスタマイズの時などに使える、フィールド追加のコードをご紹介します。
(疲れていたのでセンスのなさそうな変数名等には目をつぶってください）
何より最初にバックアップを取っておいてください。
"Page.json"と"home.page.html"と"home.page.ts"
次に、"home.page.ts"に変数"TextAreaValue"を用意してください。
"src\app\home\home.page.html"に以下のコード(と言うかテキストエリア)を追加します。
<ion-textarea [(ngModel)] = "TextAreaValue" readonly="true" rows="30"></ion-textarea>
ここから先、手順は二つに分かれます。
まず、現在のフィールド名一覧をテキストエリアに配列として書き出します。
"src\app\home\home.page.ts"のコンストラクタに以下のコードを記述。
---------------------------------------------------------------
//フィールド一覧書き出し
let pagedataEachkey = Object.keys(PageData["1"]);
this.TextAreaValue = JSON.stringify(pagedataEachkey);
---------------------------------------------------------------
これで"ionic serve"で起動すれば、テキストエリアに現在のフィールド名一覧が書きだされます。
例：
---------------------------------------------------------------
["Type","Text1","Text2","Text3","Text4","Text5","SelectNum","SelectText1","SelectText2",
"SelectText3","SelectText4","SelectText5","CheckCube","CheckFlagNum","CheckFlag1",
"CheckFlag2","CheckFlag3","CheckFlag4","CheckFlag5","CheckFlag6","CheckFlag7","CheckFlag8",
"CheckFlag9","CheckFlag10","NextPage1","NextPage2","NextPage3","NextPage4","NextPage5",
"NextPage6","NextPage7","NextPage8","NextPage9","NextPage10","NextPage11","UsedBookGroup",
"CharacterName","BtnSelectText","BtnJudgementText","BtnFirstAttackText","BtnAttackText",
"Btn1stPageText","Status1Name","Status2Name","Status3Name","chgSet","chgHP","chgAP","chgGP",
"chgMaxHP","FlagOn","SetFlagNo","FlgDescription","WinText","LoseText","GtText","EqText",
"LtText","AttackerName","AttackerHP","AttackerAP","AttackerMaxHP"]
---------------------------------------------------------------
これをコンストラクタ内で変数とします。(先頭に"let pagedataanykey = "を追加、末尾に";"を追加)
また、上のソースコード（フィールド一覧書き出し）はコメント化してください。
この変数に対し、追加したいフィールドを追加した位置に加えます。
デフォルト値が同じ変数ならば、同時に複数フィールドのセットが可能です。
例:
元 ："chgMaxHP","FlagOn"
追加："chgMaxHP","chgMaxAP","FlagOn"
以下のコードをコンストラクタの上記配列の下に追加します。
デフォルト値があれば、ここでセットします。
例:
paraanydata[pagedataanykey[j]]="999"; //デフォルト値があればここでセット
---------------------------------------------------------------
let pagedatakey = Object.keys(PageData);
let parapagedata = {};
for(let i=0;i<pagedatakey.length;i++){
let paraanydata = {};
let thisdata = PageData[pagedatakey[i]];
for(let j=0;j<pagedataanykey.length;j++){
if(pagedataanykey[j] in thisdata){
paraanydata[pagedataanykey[j]]=thisdata[pagedataanykey[j]];
}else{
paraanydata[pagedataanykey[j]]=""; //デフォルト値があればここでセット
}
}
parapagedata[pagedatakey[i]]=paraanydata;
}
this.TextAreaValue = JSON.stringify(parapagedata,null,2);
---------------------------------------------------------------
起動すれば、テキストエリアにフィールドを追加したPage.jsonがテキスト表示されますので、これを既存のPage.jsonに置き換えてください。
ソースコードの修正(主に追加）は面倒ですが、おそらく定型的に変更可能だと思います。
参考になれば幸いです。
