配列情報の取得、表示

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
javascriptとjqueryで
localstrageに保存したものを取得、表示するものを作っています。

###発生している問題・エラーメッセージ
保存したものの表示ができません。
どのように記述していけば良いのでしょうか？
ご教示頂きたいです。
どうぞよろしくお願い致します。

エラーメッセージ

###html


<body>
  <div id="form">
    <input id="text1" type="text" size="50">
    <input id="text2" type="text" size="50">
    <input id="text3" type="text" size="50">
  </div>
  

    <input type="button" onClick="saveData()" value="データ保存">
    <input type="button" onClick="readData()" value="データ読込">
    <input type="button" onClick="delData()" value="データ削除">
    
    <div id="list"></div>
    <p id="exp_Q"></p>
    <p id="exp_A"></p>
    <p id="exp_I"></p>
    
</body>
</html>

javascript
1var obj={};
2var x=1;
3
4
5function saveData(){
6	var text1 = $("#text1").val();
7	var text2 = $("#text2").val();
8	var text3 = $("#text3").val();
9
10// obj = {
11//          "english": text1,
12//          "japanese": text2,
13//          "info": text3
14//    }; 
15   
16  obj = [x,{
17         "english": text1,
18         "japanese": text2,
19         "info": text3
20   }]; 
21    console.log(JSON.stringify(obj));
22   x=x+1;
23  localStorage.setItem("data", JSON.stringify(obj));
24
25};
26
27function readData() {
28  // オブジェクトに戻して取得
29  var object = JSON.parse(localStorage.getItem("data"));
30  
31//   html.push($("<p>").text(object["english"]));
32  $("#exp_Q").html(object['english']);
33  $("#exp_A").html(object['japanese']);
34  $("#exp_I").html(object['info']);

###試したこと
課題に対してアプローチしたことを記載してください

$("#exp_Q").html(object['english']);
$("#exp_A").html(object['japanese']);
$("#exp_I").html(object['info']);

等入力してみましたが、取得することができませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

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

回答2件

ベストアンサー

質問を取り違えているかもしれませんが、これではいけないのですか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>localStorageのサンプル</title>
6    <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
7</head>
8<body>
9<div id="form">
10    <input id="text1" type="text" size="50">
11    <input id="text2" type="text" size="50">
12    <input id="text3" type="text" size="50">
13</div>
14
15
16<input type="button" onClick="saveData()" value="データ保存">
17<input type="button" onClick="readData()" value="データ読込">
18<input type="button" onClick="delData()" value="データ削除">
19
20<div id="list"></div>
21<p id="exp_Q"></p>
22<p id="exp_A"></p>
23<p id="exp_I"></p>
24<script>
25    var obj = {};
26    var x = 1;
27
28    function saveData() {
29        var text1 = $("#text1").val();
30        var text2 = $("#text2").val();
31        var text3 = $("#text3").val();
32
33        obj = {
34            "english": text1,
35            "japanese": text2,
36            "info": text3
37        };
38
39        x = x + 1;
40        localStorage.setItem("data", JSON.stringify(obj));
41
42    }
43
44    function readData() {
45        // オブジェクトに戻して取得
46        var object = JSON.parse(localStorage.getItem("data"));
47
48        $("#exp_Q").html(object['english']);
49        $("#exp_A").html(object['japanese']);
50        $("#exp_I").html(object['info']);
51    }
52</script>
53</body>
54</html>

(追記)

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>localStorageのサンプル</title>
6    <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
7</head>
8<body>
9<div id="form">
10    <input id="text1" type="text" size="50">
11    <input id="text2" type="text" size="50">
12    <input id="text3" type="text" size="50">
13</div>
14
15
16<input type="button" onClick="saveData()" value="データ保存">
17<input type="button" onClick="readData()" value="データ読込">
18<input type="button" onClick="delData()" value="データ削除">
19
20<div id="list"></div>
21<p id="exp_Q"></p>
22<p id="exp_A"></p>
23<p id="exp_I"></p>
24<script>
25    var obj = {};
26    var x = 1;
27
28    function saveData() {
29        var text1 = $("#text1").val();
30        var text2 = $("#text2").val();
31        var text3 = $("#text3").val();
32
33        obj[x] = {
34            "english": text1,
35            "japanese": text2,
36            "info": text3
37        };
38        x = x + 1;
39        localStorage.setItem("data", JSON.stringify(obj));
40    }
41
42    function readData() {
43        // オブジェクトに戻して取得
44        $("#exp_Q, #exp_A, #exp_I").empty();
45        var object = JSON.parse(localStorage.getItem("data"));
46        for (var i = 0; i < Object.keys(object).length; i += 1) {
47            $("#exp_Q").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['english'] + ", ");
48            $("#exp_A").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['japanese'] + ", ");
49            $("#exp_I").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['info'] + ", ");
50        }
51    }
52</script>
53</body>
54</html>

投稿2017/02/07 15:21

編集2017/02/07 16:18

s8_chu

総合スコア14731

tai_chi

2017/02/07 15:28

お言葉を下さりありがとうございます！！わかりづらく質問を書いてしまい申し訳ありません。実は、 "english": text1, "japanese": text2, "info": text3 を1セットとして、１として、 1セットごとに（保存をクリックする度に）、２、３、４・・と番号が振られるようにしたいと思い、以下のようにしてみました。ただ、代わりに取得ができなくなってしまいました。。 obj = [x,{ "english": text1, "japanese": text2, "info": text3 }]; 回答して頂いたにも関わらず、申し訳ありません。ありがとうございます。

tai_chi

2017/02/08 00:27

おはようございます！回答をして下さりありがとうございました！ s8_chuさんのおかげで、解決することができました。ありがとうございます。書いて頂いたコードから新しいことを学ぶことができました！引き続きコードを書いていきます。ありがとうございました！

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

objで定義しているオブジェクトが配列内に連想配列が入っている複合型ですので、
中の値へのアクセスの仕方が変わります。

obj[1]に、目的のenglishなどの情報が格納されている形になっています。

javascript
1var obj = [1, {
2         "english": 'text1',
3         "japanese": 'text2',
4         "info": 'text3'
5   }];
6
7console.log(JSON.stringify(obj)); // [1,{"english":"text1","japanese":"text2","info":"text3"}]
8
9console.log(obj[1].english); // text1

投稿2017/02/07 16:09

yamato_hikawa

総合スコア2092

tai_chi

2017/02/08 00:58

yamato_hikawaさん、回答を下さりありがとうございます！ obj[1].englishで取得ができるのですね。。ありがとうございます。自身の書き方が違ったのだと思っていましたが、以下は同じことを表していてるのでしょうか？ var obj = [x, { "english": 'text1', "japanese": 'text2', "info": 'text3' }]; と obj[x] = { "english": text1, "japanese": text2, "info": text3 }; カッコ等のルールがいまいち把握できていません。。

yamato_hikawa

2017/02/08 01:59 編集

意味が違います。上の書き方だとobjに対して配列を代入している形です。 var obj = [1, 2]; ← 本質的にはこれと同じ下の書き方だと、xの変数に入っている値をキーとして、obj内に連想配列を代入している形になります。 x=1なら、下記の意味になります。 objの1の中に、値を入れています。 obj[1] = { "english": text1, "japanese": text2, "info": text3 }; console.log(obj) で、作ったオブジェクトがどういう構造なのかわかるので。見比べてもらえると一目瞭然だと思います。

tai_chi

2017/02/13 15:27

お言葉をくださりありがとうございます。確認いたしました。詳しく教えてくださりありがとうございます。

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

あなたの回答