.mapで要素を指定した際に要素がない場合エラーが出ないようにしたい

質問失礼致します。

monacaでお小遣い帳アプリのようなものを作っています。

jqueryで上限から今月の使用額を引いた金額を"nokori"として出すようにしているのですが、"datalist"というkeyがstorageにないとエラーを吐いてしまいます。
（ないので当たり前なのですが…）
これを回避して、"nokori"を出すようにするにはどうしたらよいでしょう…

初心者の質問で申し訳ありませんが、お答えいただけたら幸いです。

jQuery
1/* 課金上限 保存 */
2  $("#kettei").click(function () {
3    storage.setItem("jogen", $("#kakin").val());
4  });
5  /* リロードした時に履歴を表示*/
6  $(function () {
7    let value = storage.getItem("jogen");
8    $("#rslt").text(value);
9
10    /* 上限から課金合計額を引く */
11    let storageItem = JSON.parse(storage.getItem('datalist'));
12    let money_number = storageItem.map(day => day.money);
13    let total = 0;
14    for (let i = 0; i < money_number.length; i++) {
15      total += money_number[i] << 0;
16    }
17    let nokori = (value - total);
18    console.log(nokori);
19    storage.setItem('datalist', JSON.stringify(storageItem))
20    $("#result").text(nokori);
21
22    //ツイートボタンが押された時の処理
23    $('#twitter_button').click(function () {　　
24      var tw_contents = ("今月の残り課金額は " + nokori + "円です！！");　　
25      var url = "[https://play.google.com/store/apps/details?id=com.rinnemankakin]";     　　
26      window.open().location.href = ("https://twitter.com/share?url=" + "https://play.google.com/store/apps/details?id=com.rinnemankakin" + "&text=" + tw_contents + "&count=none&lang=ja");
27    });
28  });

HTML
1<body>
2    <header>
3      <div id="twitter">
4        <input type="button" id="twitter_button" class="btn" value="ついーと">
5      </div>
6      <div id="nav-drawer">
7        <input id="nav-input" type="checkbox" class="nav-unshown">
8        <label id="nav-open" for="nav-input">
9          <span>menu</span>
10        </label>
11        <label class="nav-unshown" id="nav-close" for="nav-input"></label>
12        <div id="nav-content" class="nav-content">
13          <form id="settei" oninput="rslt.value = Number(settei.value);">
14            <div class="nav-honbun">
15            <p>上限設定</p>
16            <p>
17              <input type="number" id="kakin" class="kakin">円
18            </p>
19          </form>
20          <input type="button" value="決定" class="kettei_button" id="kettei">
21         <div id = "alart" class="alart">
22           <p>計算期間を指定してください</p>
23           <input type="date" id="deadline" class="deadline">まで
24           <input type="submit" value="決定" id="deadline_button" onclick="alart" class="deadline_button">
25          </div>
26         </div>
27        </div>
28      </div>
29    </header>
30    <div class="main">
31      <form id="f3">
32        <div class="jougen">
33          <p>課金上限</p>
34          <p>
35            <output id="rslt" form="settei" class="jogen">0</output>円
36          </p>
37        </div>
38      </form>
39      <div class="nokori">
40        <p>今月の残り課金額</p>
41        <p class="nokori_number">
42          <output id="result">-</output>円
43        </p>
44      </div>

追記：

/* リロードした時に履歴を表示*/
  $(function () {
    let value = storage.getItem("jogen");
    $("#rslt").text(value);

    /* 上限から課金合計額を引く */
		var getstorage = localStorage.getItem('datalist');
    if (getstorage === null){
			let money_number = "0";
		}else{
		var obj = JSON.parse(getstorage);
    let money_number = storageItem.map(day => day.money);
}
    let total = 0;
    for (let i = 0; i < money_number.length; i++) {
      total += money_number[i] << 0;
	}
    let nokori = (value - total);
    console.log(nokori);
    storage.setItem('datalist', JSON.stringify(storageItem))
    $("#result").text(nokori);

このようにしたのですがnull自体も一瞬しか現れず、money_numberが定義されていないと出ます…

yambejp

2019/04/22 08:20

storageの定義はどこかでされているのでしょうか？（不勉強で違ってたら申し訳ないですが monacaが半自動的に定義してくれるのでしょうか？）

退会済みユーザー

2019/04/22 08:21

すみませんstorageの定義は記載していないところで var storage = localStorage; と定義しております。

行動規範の内容に同意します

回答1件

ベストアンサー

getItem()の戻り値はnullです

戻り値

キーに対する値を持つ DOMString。キーが存在しない場合は null が返ります。

getItemとJSON.parse()を1回で行わずにgetItem()の結果がnullであったらmoney_numberに初期値0を入れ、nullでなかったらJSON.parse()を行う、とかで対応できると思います。

投稿2019/04/22 08:37

m.ts10806

総合スコア80852

退会済みユーザー

2019/04/22 09:01

ありがとうございます！多分これでよいだろうと上記のコードを入れてみたのですがnull自体も一瞬しか出ないためmoney_numberが定義されていないと出ます… どうしたらよいでしょうか…

m.ts10806

2019/04/22 09:07

「一瞬しかでない」がどういう状況かわかりませんが、money_numberの定義が重複してます。私の書き方も悪かったのでそこは申し訳ないです。実際は「デフォルト0でnullでなかったらJSON.parse」ですね。あとインデントがガタガタになってきていてスコープもわかりづらいので調整してみてください

退会済みユーザー

2019/04/22 09:14

できました！ありがとうございます！インデント調整します！

m.ts10806

2019/04/22 09:20

解決されたようで何よりです。インデントによって問題の切り分けがしやすくなるので、後から揃えるのではなくなるべく揃えながら書くようにしてくださいね。フォーマット機能のあるエディタもありますが、インデントを気をつけて書くことで頭も整理できますので

退会済みユーザー

2019/04/22 09:33

はい！ありがとうございます！

行動規範の内容に同意します