質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 485
退会済みユーザー

退会済みユーザー

質問失礼致します。

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

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

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

/* 課金上限 保存 */
  $("#kettei").click(function () {
    storage.setItem("jogen", $("#kakin").val());
  });
  /* リロードした時に履歴を表示*/
  $(function () {
    let value = storage.getItem("jogen");
    $("#rslt").text(value);

    /* 上限から課金合計額を引く */
    let storageItem = JSON.parse(storage.getItem('datalist'));
    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);

    //ツイートボタンが押された時の処理
    $('#twitter_button').click(function () {  
      var tw_contents = ("今月の残り課金額は " + nokori + "円です!!");  
      var url = "[https://play.google.com/store/apps/details?id=com.rinnemankakin]";       
      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");
    });
  });
<body>
    <header>
      <div id="twitter">
        <input type="button" id="twitter_button" class="btn" value="ついーと">
      </div>
      <div id="nav-drawer">
        <input id="nav-input" type="checkbox" class="nav-unshown">
        <label id="nav-open" for="nav-input">
          <span>menu</span>
        </label>
        <label class="nav-unshown" id="nav-close" for="nav-input"></label>
        <div id="nav-content" class="nav-content">
          <form id="settei" oninput="rslt.value = Number(settei.value);">
            <div class="nav-honbun">
            <p>上限設定</p>
            <p>
              <input type="number" id="kakin" class="kakin"></p>
          </form>
          <input type="button" value="決定" class="kettei_button" id="kettei">
         <div id = "alart" class="alart">
           <p>計算期間を指定してください</p>
           <input type="date" id="deadline" class="deadline">まで
           <input type="submit" value="決定" id="deadline_button" onclick="alart" class="deadline_button">
          </div>
         </div>
        </div>
      </div>
    </header>
    <div class="main">
      <form id="f3">
        <div class="jougen">
          <p>課金上限</p>
          <p>
            <output id="rslt" form="settei" class="jogen">0</output></p>
        </div>
      </form>
      <div class="nokori">
        <p>今月の残り課金額</p>
        <p class="nokori_number">
          <output id="result">-</output></p>
      </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が定義されていないと出ます…

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2019/04/22 17:20

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/04/22 17:21

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

    キャンセル

回答 1

checkベストアンサー

+1

getItem()の戻り値はnullです

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/22 18:14

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

    キャンセル

  • 2019/04/22 18:20

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

    キャンセル

  • 2019/04/22 18:33

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る