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

Question

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

解決済

回答 2

投稿 2017/02/16 02:14 ・編集 2017/02/16 04:36

評価
クリップ 0
VIEW 479

tai_chi

score 5

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

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

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

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

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

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

新しいものを追加しようとすると、番号が1に戻ってしまいます。

そこから保存ボタンを押す度に２、３、４と増えていきますが、
本当は画面をリロードして新たに登録する時、
５、６、７としたいです。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>localStorageのサンプル</title>
    <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
<div id="form">
<textarea id="text1" name="japanese" cols="40" rows="5"></textarea>
<!--     <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="データ削除">


    <p id="exp_Q"></p>
    <p id="exp_A"></p>
    <p id="exp_I"></p>

    <p>単語：</p>
    <p id="list_Q">ex</p>
    <p id="list_A">ex</p>
    <p id="list_I">ex</p>
    <button onclick="next()">進む</button>
  <button onclick="addlist()">保存</button>

<script>
var obj = {};
var x = 1;
function saveData() {
    // $("#text1, #text2, #text3").empty();
    var text1 = $("#text1").val();
    var text2 = $("#text2").val();
    var text3 = $("#text3").val();


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

    console.log(obj);

    x = x + 1;
    localStorage.setItem("data", JSON.stringify(obj));
   console.log( localStorage.getItem("data") );
    addlist();
}





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--;  
// }

    // var k = 0;
function next() {
    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']);
    console.log(object[keys[k]]['english'])
    k++;  
}

var iMax = 0;
    function list(){
        var object = JSON.parse(localStorage.getItem("data"));
        var keys = Object.keys(object);
        var a = "";
        for( var i=0, l=keys.length; i<l; i++) {
            a += "<tr>\n";
            a += "<td>";
            a += keys[i];
            a += "</td>\n";

            for (j = 0; j < Object.keys(object[keys[i]]).length; j++) {
                a += "<td>";
                a += object[keys[i]][Object.keys(object[keys[i]])[j]];
                a += "</td>\n";
            }
            a += "</tr>\n";
            iMax = i;
        }
        $("#listbox").append(a);
    }

    var i = 0;
    function addlist(){
        var object = JSON.parse(localStorage.getItem("data"));
        var keys = Object.keys(object);
        var a = "";
            a += "<tr>\n";
            a += "<td>";
            // if(!keys.length + 1 == i){
            //     a = keys.length + keys[i]
            // }else{
            //     a += keys[i];
            // };
            a += keys[i];
            a += "</td>\n";
            a += "<td>";
            a += object[keys[i]]['english'];
            a += "</td>\n";
            a += "<td>";
            a += object[keys[i]]['japanese'];
            a += "</td>\n";
            a += "<td>";
            a += object[keys[i]]['info'];
            a += "</td>\n";
            a += "</tr>\n";
        $("#listbox").append(a);
        i++;

    }

    function count(){

    }

</script>

試したこと

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

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

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

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

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

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

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

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問広告と受け取られるような投稿
詳細な説明はこちら

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

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

9 件の質問への追記・修正依頼

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

kei344

2017/02/16 02:26

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

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

キャンセル
kei344

2017/02/16 02:34

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

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

キャンセル
tai_chi

2017/02/16 02:40

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

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

キャンセル
tai_chi

2017/02/16 03:03

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

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

キャンセル
kei344

2017/02/16 03:24

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

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

キャンセル
tai_chi

2017/02/16 03:36

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

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

キャンセル
kei344

2017/02/16 03:49

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

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

キャンセル
tai_chi

2017/02/16 04:08

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

何度も申し訳ありません。勘違いしておりました。。以下のように表示されました。よろしくお願いいたします。　{"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/16 04:37

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

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

キャンセル

回答 2 件

評価が高い順
新着順
古い順

+4

こういうことでしょうか...と思ったのですが違うようなので修正します。
失礼しました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>localStorageのサンプル</title>
</head>
<body>
<div id="form">
    <label>
        <input id="text1" type="text" size="50">
    </label>
    <label>
        <input id="text2" type="text" size="50">
    </label>
    <label>
        <input id="text3" type="text" size="50">
    </label>
</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>
<hr>
<input type="button" onClick="next()" id="next_button" value="進む">
<input type="button" onClick="back()" id="back_button" value="戻る">
<hr>
<p id="list_Q"></p>
<p id="list_A"></p>
<p id="list_I"></p>
<hr>
<button onclick="addlist()">保存</button>

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
    var obj = {};
    var x = 1;


    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']);
        }
    });

    function saveData() {
        var text1 = $("#text1").val();
        var text2 = $("#text2").val();
        var text3 = $("#text3").val();

        obj[x] = {
            "english": text1,
            "japanese": text2,
            "info": text3
        };
        x = x + 1;
        localStorage.setItem("data", JSON.stringify(obj));
    }

    function readData() {
        // オブジェクトに戻して取得
        $("#exp_Q, #exp_A, #exp_I").empty();
        var object = JSON.parse(localStorage.getItem("data"));
        for (var i = 0; i < Object.keys(object).length; i += 1) {
            $("#exp_Q").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['english'] + ", ");
            $("#exp_A").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['japanese'] + ", ");
            $("#exp_I").append(Object.keys(object)[i] + ": " + object[Object.keys(object)[i]]['info'] + ", ");
        }
    }

    var i = 0;
    function back() {
        var object = JSON.parse(localStorage.getItem("data"));
        var keys = Object.keys(object);
        if (i <= 0) {
            return false;
        } else {
            i--;
            $('#list_Q').text(object[keys[i]]['english']);
            $('#list_A').text(object[keys[i]]['japanese']);
            $('#list_I').text(object[keys[i]]['info']);
        }
    }

    function next() {
        var object = JSON.parse(localStorage.getItem("data"));
        var keys = Object.keys(object);
        if (i + 1 >= Object.keys(object).length) {
            return false;
        } else {
            i++;
            $('#list_Q').text(object[keys[i]]['english']);
            $('#list_A').text(object[keys[i]]['japanese']);
            $('#list_I').text(object[keys[i]]['info']);
        }
    }
</script>
</body>
</html>

投稿 2017/02/16 02:51

編集 2017/02/16 03:51

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2017/02/16 03:41

お言葉をくださりありがとうございます。
以前登録していた分の表示はできますが、リロードしてから追加保存すると、
object自体の数字が１に戻ってしまうのです。。
1: apple りんご　果物　2: orange オレンジ　果物ここまで登録してリロードしたとして、
この後に追加保存すると数字が
３：　　４；　ではなく、
１：　　２：　に戻ってしまうのです。。

申し訳ありません。説明がわかりにくく。。

backとnextのfunctionのコードが動かなかったです。。

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

キャンセル

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

JavaScript

16347questions

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

6674questions

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

522questions

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

score 2 · Accepted Answer · 2017-02-25T14:13

ベストアンサー

+2

2点。

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

投稿 2017/02/25 14:13

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2017/03/01 01: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 = {};
}

ただ、通常の配列で行うやり方がわからなかったです。。
勉強を続けていきます！

お言葉をくださりありがとうございました！

ご回答をくださりありがとうございます。お返事が遅くなり申し訳ございません。結果、なんとか番号を登録順にすることができました。 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 = {}; } ただ、通常の配列で行うやり方がわからなかったです。。勉強を続けていきます！お言葉をくださりありがとうございました！

キャンセル

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

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

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

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

該当のソースコード

試したこと

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

関連した質問

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

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

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

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

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

該当のソースコード

試したこと

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

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン

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