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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

解決済

2回答

1902閲覧

配列 オブジェクト番号の取得、割当

tai_chi

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2017/02/15 17:14

編集2017/02/15 19:36

Noの番号が1からになってしまいます](263be59f33f5c30cf18714ece5f955ac.png)###前提・実現したいこと
ここに質問したいことを詳細に書いてください
以下のようにJSON形式で保存した連想配列を追加登録する際、
今まで登録したものの数に1をプラスして登録したいです。

(1)画面をロードした時に今まで登録した分を一覧表示。
function list()[]内に記載。

(2)保存ボタンをクリックする度に、
今まで登録した分に加えて、オブジェクトを追加。
function addlist()[]内に記載。

obj[x] = { "english": text1, "japanese": text2, "info": text3 };

お言葉いただきたいです。どうぞよろしくお願いいたします。

###発生している問題・エラーメッセージ

新しいものを追加しようとすると、番号が1に戻ってしまいます。 そこから保存ボタンを押す度に2、3、4と増えていきますが、 本当は画面をリロードして新たに登録する時、 5、6、7としたいです。

###該当のソースコード

html

1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"> 6 <title>localStorageのサンプル</title> 7 <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> 8</head> 9<body> 10<div id="form"> 11<textarea id="text1" name="japanese" cols="40" rows="5"></textarea> 12<!-- <input id="text1" type="text" size="50"> --> 13 <input id="text2" type="text" size="50"> 14 <input id="text3" type="text" size="50"> 15</div> 16 17 18<input type="button" onClick="saveData()" value="データ保存"> 19<input type="button" onClick="readData()" value="データ読込"> 20<input type="button" onClick="delData()" value="データ削除"> 21 22 23 <p id="exp_Q"></p> 24 <p id="exp_A"></p> 25 <p id="exp_I"></p> 26 27 <p>単語:</p> 28 <p id="list_Q">ex</p> 29 <p id="list_A">ex</p> 30 <p id="list_I">ex</p> 31 <button onclick="next()">進む</button> 32 <button onclick="addlist()">保存</button> 33 34<script> 35var obj = {}; 36var x = 1; 37function saveData() { 38 // $("#text1, #text2, #text3").empty(); 39 var text1 = $("#text1").val(); 40 var text2 = $("#text2").val(); 41 var text3 = $("#text3").val(); 42 43 44 obj[x] = { 45 "english": text1, 46 "japanese": text2, 47 "info": text3 48 }; 49 50 console.log(obj); 51 52 x = x + 1; 53 localStorage.setItem("data", JSON.stringify(obj)); 54 console.log( localStorage.getItem("data") ); 55 addlist(); 56} 57 58 59 60 61 62var k = 0; 63// function back() { 64// var object = JSON.parse(localStorage.getItem("data")); 65// var keys = Object.keys(object); 66// $('#list_Q').text(object[keys[k]]['english']); 67// $('#list_A').text(object[keys[k]]['japanese']); 68// $('#list_I').text(object[keys[k]]['info']); 69// k--; 70// } 71 72 // var k = 0; 73function next() { 74 var object = JSON.parse(localStorage.getItem("data")); 75 var keys = Object.keys(object); 76 $('#list_Q').text(object[keys[k]]['english']); 77 $('#list_A').text(object[keys[k]]['japanese']); 78 $('#list_I').text(object[keys[k]]['info']); 79 console.log(object[keys[k]]['english']) 80 k++; 81} 82 83var iMax = 0; 84 function list(){ 85 var object = JSON.parse(localStorage.getItem("data")); 86 var keys = Object.keys(object); 87 var a = ""; 88 for( var i=0, l=keys.length; i<l; i++) { 89 a += "<tr>\n"; 90 a += "<td>"; 91 a += keys[i]; 92 a += "</td>\n"; 93 94 for (j = 0; j < Object.keys(object[keys[i]]).length; j++) { 95 a += "<td>"; 96 a += object[keys[i]][Object.keys(object[keys[i]])[j]]; 97 a += "</td>\n"; 98 } 99 a += "</tr>\n"; 100 iMax = i; 101 } 102 $("#listbox").append(a); 103 } 104 105 var i = 0; 106 function addlist(){ 107 var object = JSON.parse(localStorage.getItem("data")); 108 var keys = Object.keys(object); 109 var a = ""; 110 a += "<tr>\n"; 111 a += "<td>"; 112 // if(!keys.length + 1 == i){ 113 // a = keys.length + keys[i] 114 // }else{ 115 // a += keys[i]; 116 // }; 117 a += keys[i]; 118 a += "</td>\n"; 119 a += "<td>"; 120 a += object[keys[i]]['english']; 121 a += "</td>\n"; 122 a += "<td>"; 123 a += object[keys[i]]['japanese']; 124 a += "</td>\n"; 125 a += "<td>"; 126 a += object[keys[i]]['info']; 127 a += "</td>\n"; 128 a += "</tr>\n"; 129 $("#listbox").append(a); 130 i++; 131 132 } 133 134 function count(){ 135 136 } 137 138</script>

###試したこと
list();内でiMaxで最大数を入れて、addlist()内で1プラスしようとしたり、
登録されている全ての数をkeys.lengthで取得し、1プラスしてみたりしました。

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/02/15 17:26

そもそも localStorage に追加保存されていませんが、何をしたいのか追記していただけませんか?
kei344

2017/02/15 17:34

「保存」の動きが追記されていませんがそれは無視するということですね。console.log( localStorage.getItem("data") ); の値を追記してください。 どういうデータを入れているのかがわかりません。
tai_chi

2017/02/15 17:40

申し訳ありません。ただいま、追記致しました!function list(){}は起動時に読み込まれるようにしています。保存ボタンを押して追加しようとすると、番号が1に戻ってしまいます。
tai_chi

2017/02/15 18:03

console.log( localStorage.getItem("data") ); を追記致しました。申し訳ありません。よろしくお願いいたします。
kei344

2017/02/15 18:24

console.log( localStorage.getItem("data") ); はコード中に入れてくれということではなく、それの出力する値を書いてほしいということです。出力はデベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error また、「obj[x]」が宣言されずに書かれていますが、どこかで定義されているのでしょうか。
tai_chi

2017/02/15 18:36

console.logで確認したところ、1:Object english : "apple" info : "果物" japanese : "りんご" となりました。 申し訳ありません。。var obj = {}; var x = 1;を追記致しました。
kei344

2017/02/15 18:49

console.log( localStorage.getItem("data") ); でその値が返ってくる事は考えられません。console.log(obj);と勘違いされていませんか?
tai_chi

2017/02/15 19:08

何度も申し訳ありません。勘違いしておりました。。以下のように表示されました。よろしくお願いいたします。 {"1":{"english":"a","japanese":"a","info":"a"},"2":{"english":"aa","japanese":"aa","info":"aa"},"3":{"english":"b","japanese":"b","info":"b"}}
tai_chi

2017/02/15 19:37

度々申し訳ありません。キャプチャ画面を添付致しました。リロードした後に追加したものはNo1から始まってしまいます。
guest

回答2

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 17:51

編集2017/02/15 18:51
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tai_chi

2017/02/15 18:41

お言葉をくださりありがとうございます。 以前登録していた分の表示はできますが、リロードしてから追加保存すると、 object自体の数字が1に戻ってしまうのです。。 1: apple りんご 果物 2: orange オレンジ 果物 ここまで登録してリロードしたとして、 この後に追加保存すると数字が 3:  4; ではなく、 1:  2: に戻ってしまうのです。。 申し訳ありません。説明がわかりにくく。。 backとnextのfunctionのコードが動かなかったです。。
guest

0

ベストアンサー

2点。
0. var x = 1; が固定なのでリロード後に変化しない(上書きされる)
ロード時に要素数を x に代入するか、変動があった場合ストレージに保存してそれをロード時に代入すればと変化すると思う。(後者のほうがお勧め)
0. そもそも連想配列で保存することはお勧めしない
連想配列は順序については処理系によります。なので登録順が保存されるわけではないため、ソートするなどしないといけません。通常の配列にオブジェクトを入れるのが良いと思います。

投稿2017/02/25 05:13

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tai_chi

2017/02/28 16:04

ご回答をくださりありがとうございます。 お返事が遅くなり申し訳ございません。 結果、なんとか番号を登録順にすることができました。 function saveData() { var obj = localStorage.getItem("data"); console.log(obj); var keyNum = 1; if(obj != null) { obj = JSON.parse(obj); var keys = Object.keys(obj); keyNum = keys.length + 1; } else { obj = {}; } ただ、通常の配列で行うやり方がわからなかったです。。 勉強を続けていきます! お言葉をくださりありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問