JavascriptでWeb storageでデータを保存しています。データを読みだして配列に入れる際、必要なデータのみを抽出したいと考えています。アドバイス頂きようやく形はできたのですがいくつか疑問点があります。

タブからユーザー名を選択して保存ボタンを押すと、現在時刻をファイル名にしてデータが保存されます。
ユーザー名を変えて保存し何度か繰り返します。保存されたデータを読みだす際に例えば”青木”というユーザー名だけ抽出してリスト表示させたいのですがなぜかリストの中に空データが入ってしまいます。青木のみを抽出したのですが、この空データは他のユーザー名のものなのかよく理解できませんでした。空のデータを除外することはできるのでしょうか?また、青木のデータの中の配列で得点のところ(100点)だけ抽出して表示させるやり方がよくわかりません。(青木のデータのみを保存順番に、上から表示させたい(空データを除く))もしかして、<DIV>の表示枠のほうで配列の形式などで、必要な部分だけを出力するのかとも考えたのですが、うまくできませんでした。是非ともアドバイス頂ければ幸いです。宜しくお願いします。

回答の条件
  • 1人30回まで
  • 登録:2015/11/05 14:50:33
  • 終了:2015/11/10 14:51:12
id:kajironpu

https://jsfiddle.net/kajironpu/wvh46tmf/1/ 

こちらにJS fiddleにサンプルのコードを入力しました。

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4469ベストアンサー獲得回数18442015/11/05 16:47:14

ざっくり言うと、ストレージのデータを抜き出しているループの中で、青木のデータを抜き出して出力、としているのが期待通りにならない原因です。
ストレージのデータを全て抜き出してから、青木のデータだけにして出力、です。

読み込みボタンを押したときの処理を書き直しました。
元のソースを極力残してます。

//読込ボタンをクリックした時の処理
document.getElementById("load").addEventListener("click",function(){
// localStorage.key(i)でi番目のデータのkeyが取れる。

    // ストレージのデータをすべて抜き出す
    var dataArray=[];
    for (var i=0; i<localStorage.length; i++){
        var k = localStorage.key(i);
        dataArray[i] =JSON.parse(localStorage.getItem(k));

    }

    // x に「青木」のデータだけを抽出する
    var x = dataArray.filter(function(e){return e[1]=="青木"});

    // 青木のデータを全て出力する
    x.forEach(function(data) {
        document.getElementById("list").innerHTML += '<font size="5" color="#0000ff"><TABLE border=1 cellpadding=0 cellspacing=5><tr><TD bgcolor="#FFCCCC">'+data+'<font></td></tr></table>';
    });

},false);

欲しいのが「青木」のデータだけであれば、ストレージから抜き出すときにはねちゃう方が素直だと思います。

//読込ボタンをクリックした時の処理
document.getElementById("load").addEventListener("click",function(){
// localStorage.key(i)でi番目のデータのkeyが取れる。

    // ストレージのデータから「青木」のデータだけを取り出す
    var dataArray=[];
    for (var i=0; i<localStorage.length; i++){
        var k = localStorage.key(i);
        var v = JSON.parse(localStorage.getItem(k));
        if (v[1] == "青木") {
            dataArray.push(v);
        }

    }

    // 青木のデータを全て出力する
    dataArray.forEach(function(data) {
        document.getElementById("list").innerHTML += '<font size="5" color="#0000ff"><TABLE border=1 cellpadding=0 cellspacing=5><tr><TD bgcolor="#FFCCCC">'+data+'<font></td></tr></table>';
    });

},false);


あ、Storage#key() が保存した順番の逆順で取り出しちゃうみたいです。
並べ替えの処理も入れると、こうなります。

//読込ボタンをクリックした時の処理
document.getElementById("load").addEventListener("click",function(){
// localStorage.key(i)でi番目のデータのkeyが取れる。

    // ストレージのデータをすべて抜き出す
    var dataArray=[];
    for (var i=0; i<localStorage.length; i++){
        var k = localStorage.key(i);
        var v = JSON.parse(localStorage.getItem(k));
        if (v[1] == "青木") {
            dataArray.push(v);
        }

    }

    // データを日時で並べ替える
    dataArray = dataArray.sort(function(a, b) {
        if (a[0] > b[0]) {
            return 1;
        } else if (a[0] < b[0]) {
            return -1;
        }
        return 0;
    });

    // 青木のデータを全て出力する
    dataArray.forEach(function(data) {
        document.getElementById("list").innerHTML += '<font size="5" color="#0000ff"><TABLE border=1 cellpadding=0 cellspacing=5><tr><TD bgcolor="#FFCCCC">'+data+'<font></td></tr></table>';
    });

},false);

Array#sort メソッドが配列を返すので、sort メソッドの戻り値に forEach メソッドを呼び出して、という書き方もできます。

    // 青木のデータを日時で並べ替えて、全て出力する
    dataArray.sort(function(a, b) {
        if (a[0] > b[0]) {
            return 1;
        } else if (a[0] < b[0]) {
            return -1;
        }
        return 0;
    }).forEach(function(data) {
        document.getElementById("list").innerHTML += '<font size="5" color="#0000ff"><TABLE border=1 cellpadding=0 cellspacing=5><tr><TD bgcolor="#FFCCCC">'+data+'<font></td></tr></table>';
    });

こっちの書き方は慣れないと分かりにくいかもしれませんが、jQuery を使う場合にはこっちの書き方が主流です。

他5件のコメントを見る
id:a-kuma3

例えば、青木さんのデータがこれまでのやり取りのような dataArray に入ってるとします。
dataArray[0] は、一回目のデータ。
dataArray[0][3] は、一回目の得点です。
dataArray[1] は、二回目のデータ。
dataArray[1][3] は、二回目の得点です。
# 日時で並べ替えされてるとして。

chart.js に渡す data には、以下のように設定することになります。

data : [ dataArray[0][3], dataArray[1][3], dataArray[2][3], ... ]

回答履歴の個数が分からないので、このように、ひとつひとつ書くわけにはいかないので、Array#push の出番です。
得点だけを詰めた配列を Chart に渡す引数に設定します。

// 得点だけを詰めた配列を作る
var pointArray = [];
dataArray.forEach(function(data) {
    pointArray.push(data[3]);
});

    ...

var barChartData = {
    labels : ...
    datasets : [
        [
            ...
            data : pointArray   // 特典の配列を data に設定する
        ]
        ...
    ]
};

試してないけど、こんな感じです。

2015/11/07 01:34:19
id:kajironpu

ありがとうございました。おかげさまで無事表示することができました。

配列のデータを抜き出すやり方が理解できず困っていたのですが
ようやく理解できました。
pointArray.push(data[3]); でスコアデータを配列にどんどん追加していくのですね。 dataArray自体は、2次配列みたいになっていますがそこから
点数の部分だけを集めるには、
dataArray.forEach(function(data) {
pointArray.push(data[3]);
このようなやり方を使うのですね。なかなか難しいですが、うまく使いこなせるように練習したいと思います。
ありがとうございました。

2015/11/07 23:06:59

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4469ベストアンサー獲得回数18442015/11/05 16:47:14ここでベストアンサー

ざっくり言うと、ストレージのデータを抜き出しているループの中で、青木のデータを抜き出して出力、としているのが期待通りにならない原因です。
ストレージのデータを全て抜き出してから、青木のデータだけにして出力、です。

読み込みボタンを押したときの処理を書き直しました。
元のソースを極力残してます。

//読込ボタンをクリックした時の処理
document.getElementById("load").addEventListener("click",function(){
// localStorage.key(i)でi番目のデータのkeyが取れる。

    // ストレージのデータをすべて抜き出す
    var dataArray=[];
    for (var i=0; i<localStorage.length; i++){
        var k = localStorage.key(i);
        dataArray[i] =JSON.parse(localStorage.getItem(k));

    }

    // x に「青木」のデータだけを抽出する
    var x = dataArray.filter(function(e){return e[1]=="青木"});

    // 青木のデータを全て出力する
    x.forEach(function(data) {
        document.getElementById("list").innerHTML += '<font size="5" color="#0000ff"><TABLE border=1 cellpadding=0 cellspacing=5><tr><TD bgcolor="#FFCCCC">'+data+'<font></td></tr></table>';
    });

},false);

欲しいのが「青木」のデータだけであれば、ストレージから抜き出すときにはねちゃう方が素直だと思います。

//読込ボタンをクリックした時の処理
document.getElementById("load").addEventListener("click",function(){
// localStorage.key(i)でi番目のデータのkeyが取れる。

    // ストレージのデータから「青木」のデータだけを取り出す
    var dataArray=[];
    for (var i=0; i<localStorage.length; i++){
        var k = localStorage.key(i);
        var v = JSON.parse(localStorage.getItem(k));
        if (v[1] == "青木") {
            dataArray.push(v);
        }

    }

    // 青木のデータを全て出力する
    dataArray.forEach(function(data) {
        document.getElementById("list").innerHTML += '<font size="5" color="#0000ff"><TABLE border=1 cellpadding=0 cellspacing=5><tr><TD bgcolor="#FFCCCC">'+data+'<font></td></tr></table>';
    });

},false);


あ、Storage#key() が保存した順番の逆順で取り出しちゃうみたいです。
並べ替えの処理も入れると、こうなります。

//読込ボタンをクリックした時の処理
document.getElementById("load").addEventListener("click",function(){
// localStorage.key(i)でi番目のデータのkeyが取れる。

    // ストレージのデータをすべて抜き出す
    var dataArray=[];
    for (var i=0; i<localStorage.length; i++){
        var k = localStorage.key(i);
        var v = JSON.parse(localStorage.getItem(k));
        if (v[1] == "青木") {
            dataArray.push(v);
        }

    }

    // データを日時で並べ替える
    dataArray = dataArray.sort(function(a, b) {
        if (a[0] > b[0]) {
            return 1;
        } else if (a[0] < b[0]) {
            return -1;
        }
        return 0;
    });

    // 青木のデータを全て出力する
    dataArray.forEach(function(data) {
        document.getElementById("list").innerHTML += '<font size="5" color="#0000ff"><TABLE border=1 cellpadding=0 cellspacing=5><tr><TD bgcolor="#FFCCCC">'+data+'<font></td></tr></table>';
    });

},false);

Array#sort メソッドが配列を返すので、sort メソッドの戻り値に forEach メソッドを呼び出して、という書き方もできます。

    // 青木のデータを日時で並べ替えて、全て出力する
    dataArray.sort(function(a, b) {
        if (a[0] > b[0]) {
            return 1;
        } else if (a[0] < b[0]) {
            return -1;
        }
        return 0;
    }).forEach(function(data) {
        document.getElementById("list").innerHTML += '<font size="5" color="#0000ff"><TABLE border=1 cellpadding=0 cellspacing=5><tr><TD bgcolor="#FFCCCC">'+data+'<font></td></tr></table>';
    });

こっちの書き方は慣れないと分かりにくいかもしれませんが、jQuery を使う場合にはこっちの書き方が主流です。

他5件のコメントを見る
id:a-kuma3

例えば、青木さんのデータがこれまでのやり取りのような dataArray に入ってるとします。
dataArray[0] は、一回目のデータ。
dataArray[0][3] は、一回目の得点です。
dataArray[1] は、二回目のデータ。
dataArray[1][3] は、二回目の得点です。
# 日時で並べ替えされてるとして。

chart.js に渡す data には、以下のように設定することになります。

data : [ dataArray[0][3], dataArray[1][3], dataArray[2][3], ... ]

回答履歴の個数が分からないので、このように、ひとつひとつ書くわけにはいかないので、Array#push の出番です。
得点だけを詰めた配列を Chart に渡す引数に設定します。

// 得点だけを詰めた配列を作る
var pointArray = [];
dataArray.forEach(function(data) {
    pointArray.push(data[3]);
});

    ...

var barChartData = {
    labels : ...
    datasets : [
        [
            ...
            data : pointArray   // 特典の配列を data に設定する
        ]
        ...
    ]
};

試してないけど、こんな感じです。

2015/11/07 01:34:19
id:kajironpu

ありがとうございました。おかげさまで無事表示することができました。

配列のデータを抜き出すやり方が理解できず困っていたのですが
ようやく理解できました。
pointArray.push(data[3]); でスコアデータを配列にどんどん追加していくのですね。 dataArray自体は、2次配列みたいになっていますがそこから
点数の部分だけを集めるには、
dataArray.forEach(function(data) {
pointArray.push(data[3]);
このようなやり方を使うのですね。なかなか難しいですが、うまく使いこなせるように練習したいと思います。
ありがとうございました。

2015/11/07 23:06:59

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません