Q&A
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を追記ください。
###前提・実現したいこと
以下のようにJSON形式で登録した情報を取得し、戻るボタンを押すと
一つ前のオブジェクトを取得できるようにしたいです。
一つ後のオブジェクトは取得できました。
obj[x] = { "english": text1, "japanese": text2, "info": text3 };
ご教示いただきたいです。
どうぞよろしくお願い致します。
###発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read property 'english' of undefined at back となってしまいます。
###該当のソースコード
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<textarea id="text1" name="japanese" cols="40" rows="5"></textarea> 11<!-- <input id="text1" type="text" size="50"> --> 12 <input id="text2" type="text" size="50"> 13 <input id="text3" type="text" size="50"> 14</div> 15 16 17<input type="button" onClick="saveData()" value="データ保存"> 18<input type="button" onClick="readData()" onclick="addlist()" value="データ読込"> 19<input type="button" onClick="delData()" value="データ削除"> 20 21 22 <p id="exp_Q"></p> 23 <p id="exp_A"></p> 24 <p id="exp_I"></p> 25 26 <p>単語：</p> 27 <p id="list_Q">ex</p> 28 <p id="list_A">ex</p> 29 <p id="list_I">ex</p> 30<button onclick="back()">戻る</button> 31 <button onclick="next()">進む</button> 32 33<script> 34var obj = {}; 35var x = 1; 36function saveData() { 37 // $("#text1, #text2, #text3").empty(); 38 var text1 = $("#text1").val(); 39 var text2 = $("#text2").val(); 40 var text3 = $("#text3").val(); 41 42 43 obj[x] = { 44 "english": text1, 45 "japanese": text2, 46 "info": text3 47 }; 48 49 console.log(obj); 50 51 x = x + 1; 52 localStorage.setItem("data", JSON.stringify(obj)); 53 console.log( localStorage.getItem("data") ); 54 addlist(); 55} 56 57 58 59 60 61var k = 0; 62// function back() { 63// var object = JSON.parse(localStorage.getItem("data")); 64// var keys = Object.keys(object); 65// $('#list_Q').text(object[keys[k]]['english']); 66// $('#list_A').text(object[keys[k]]['japanese']); 67// $('#list_I').text(object[keys[k]]['info']); 68// k--; 69// } 70 71 // var k = 0; 72function next() { 73 var object = JSON.parse(localStorage.getItem("data")); 74 var keys = Object.keys(object); 75 $('#list_Q').text(object[keys[k]]['english']); 76 $('#list_A').text(object[keys[k]]['japanese']); 77 $('#list_I').text(object[keys[k]]['info']); 78 console.log(object[keys[k]]['english']) 79 k++; 80} 81 82var iMax = 0; 83 function list(){ 84 var object = JSON.parse(localStorage.getItem("data")); 85 var keys = Object.keys(object); 86 var a = ""; 87 for( var i=0, l=keys.length; i<l; i++) { 88 a += "<tr>\n"; 89 a += "<td>"; 90 a += keys[i]; 91 a += "</td>\n"; 92 93 for (j = 0; j < Object.keys(object[keys[i]]).length; j++) { 94 a += "<td>"; 95 a += object[keys[i]][Object.keys(object[keys[i]])[j]]; 96 a += "</td>\n"; 97 } 98 a += "</tr>\n"; 99 iMax = i; 100 } 101 $("#listbox").append(a); 102 } 103 104 var i = 0; 105 function addlist(){ 106 var object = JSON.parse(localStorage.getItem("data")); 107 var keys = Object.keys(object); 108 var a = ""; 109 a += "<tr>\n"; 110 a += "<td>"; 111 // if(!keys.length + 1 == i){ 112 // a = keys.length + keys[i] 113 // }else{ 114 // a += keys[i]; 115 // }; 116 a += keys[i]; 117 a += "</td>\n"; 118 a += "<td>"; 119 a += object[keys[i]]['english']; 120 a += "</td>\n"; 121 a += "<td>"; 122 a += object[keys[i]]['japanese']; 123 a += "</td>\n"; 124 a += "<td>"; 125 a += object[keys[i]]['info']; 126 a += "</td>\n"; 127 a += "</tr>\n"; 128 $("#listbox").append(a); 129 i++; 130 131 } 132 133 function count(){ 134 135 } 136 137</script>
###試したこと
var k = 0;
function back() {
var object = JSON.parse(localStorage.getItem("data"));
var keys = Object.keys(object);
$('#list_Q').text(object[keys[k]]['english']);
$('#list_A').text(object[keys[k]]['japanese']);
$('#list_I').text(object[keys[k]]['info']);
k--;
}
として、グローバル変数kを0として、現在の値からクリックする度にプラス、マイナスと
できるように書いてみましたが、値の取得できませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
回答1件
0
ベストアンサー
これでどうでしょうか。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>localStorageのサンプル</title> 6</head> 7<body> 8<div id="form"> 9 <label> 10 <input id="text1" type="text" size="50"> 11 </label> 12 <label> 13 <input id="text2" type="text" size="50"> 14 </label> 15 <label> 16 <input id="text3" type="text" size="50"> 17 </label> 18</div> 19 20 21<input type="button" onClick="saveData()" value="データ保存"> 22<input type="button" onClick="readData()" value="データ読込"> 23<input type="button" onClick="delData()" value="データ削除"> 24<div id="list"></div> 25<p id="exp_Q"></p> 26<p id="exp_A"></p> 27<p id="exp_I"></p> 28<hr> 29<input type="button" onClick="next()" id="next_button" value="進む"> 30<input type="button" onClick="back()" id="back_button" value="戻る"> 31<hr> 32<p id="list_Q"></p> 33<p id="list_A"></p> 34<p id="list_I"></p> 35<hr> 36<button onclick="addlist()">保存</button> 37 38<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> 39<script> 40 var obj = {}; 41 var x = 1; 42 43 44 document.addEventListener("DOMContentLoaded", function () { 45 var object = JSON.parse(localStorage.getItem("data")); 46 var keys = Object.keys(object); 47 if (Object.keys(object).length !== 0) { 48 $('#list_Q').text(object[keys[0]]['english']); 49 $('#list_A').text(object[keys[0]]['japanese']); 50 $('#list_I').text(object[keys[0]]['info']); 51 } 52 }); 53 54 function saveData() { 55 var text1 = $("#text1").val(); 56 var text2 = $("#text2").val(); 57 var text3 = $("#text3").val(); 58 59 obj[x] = { 60 "english": text1, 61 "japanese": text2, 62 "info": text3 63 }; 64 x = x + 1; 65 localStorage.setItem("data", JSON.stringify(obj)); 66 } 67 68 function readData() { 69 // オブジェクトに戻して取得 70 $("#exp_Q, #exp_A, #exp_I").empty(); 71 var object = JSON.parse(localStorage.getItem("data")); 72 for (var i = 0; i < Object.keys(object).length; i += 1) { 73 $("#exp_Q").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['english'] + ", "); 74 $("#exp_A").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['japanese'] + ", "); 75 $("#exp_I").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['info'] + ", "); 76 } 77 } 78 79 var i = 0; 80 function back() { 81 var object = JSON.parse(localStorage.getItem("data")); 82 var keys = Object.keys(object); 83 if (i <= 0) { 84 return false; 85 } else { 86 i--; 87 $('#list_Q').text(object[keys[i]]['english']); 88 $('#list_A').text(object[keys[i]]['japanese']); 89 $('#list_I').text(object[keys[i]]['info']); 90 } 91 } 92 93 function next() { 94 var object = JSON.parse(localStorage.getItem("data")); 95 var keys = Object.keys(object); 96 if (i + 1 >= Object.keys(object).length) { 97 return false; 98 } else { 99 i++; 100 $('#list_Q').text(object[keys[i]]['english']); 101 $('#list_A').text(object[keys[i]]['japanese']); 102 $('#list_I').text(object[keys[i]]['info']); 103 } 104 } 105</script> 106</body> 107</html>
投稿2017/02/15 18:52
総合スコア14731
ご回答してくださりありがとうございます！
function next内の
if (i + 1 >= Object.keys(object).length) {
return false;
} else {
i++;
がわからないです。ただ、足していくだけだとエラーが出てしまう可能性を消せないということでしょうか？
また、
document.addEventListener("DOMContentLoaded", function () {
var object = JSON.parse(localStorage.getItem("data"));
var keys = Object.keys(object);
if (Object.keys(object).length !== 0) {
$('#list_Q').text(object[keys[0]]['english']);
$('#list_A').text(object[keys[0]]['japanese']);
$('#list_I').text(object[keys[0]]['info']);
}
});
はどういう効果があるのでしょうか？自動的に0番目からしまわれていくものと思っていました。
このような質問をしてしまい申し訳ありません。
より理解したいと思い、質問いたしました。よろしくお願いいたします！
backの動きができました！！ ifを使って0かどうかで振り分ければよかったのですね！ありがとうございます！！
あなたの回答
tips
プレビュー
