C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[7]: JavaScript　pushについて

分類:[JavaScript]　

2020/03/04(Wed) 13:12:06 編集(投稿者)

2020/03/04(Wed) 13:11:49 編集(投稿者)
2020/03/04(Wed) 11:34:59 編集(投稿者)

<pre><pre>JavaScript

オブジェクトは'push'プロパティまたはメソッドをサポートしていません。
とエラーメッセージが表示されます。
改善策を教えていただけないでしょうか？

    // ラジオとチェックボックスのチェック値を取得
    $("form input:checked").each(function(){
        // チェックボックス
        if($(this).prop('type')=='checkbox'){
            if(obj[this.id]===undefined)obj[this.id] = [];
            if (checkFlg == false) {
                //新規登録画面初期表示
                obj[this.id].push($(this).val()); ←このpushでエラー
            }else{
                if (obj[this.id] != $(this).val()) {
                    //メッセージ表示
                    messageFlg = false;
                    return messageFlg;
                }
            }
        } else {
            //ラジオボタン
            if (checkFlg == false) {
                //新規登録画面初期表示
                obj[this.id] = this.value;
            }else{
                if (obj[this.id] != this.value) {
                    //メッセージ表示
                    messageFlg = false;
                    return messageFlg;
                }
            }
        }
    });
</pre></pre>

2020/03/04(Wed) 13:24:14 編集(投稿者)

ここの掲示板では、新規投稿時に
「半角カナは使用しないでください。文字化けの原因になります。]
という注意書きが表示されていたかと思います。
次回以降ご留意ください。

■No94013 (初さん) に返信
> オブジェクトは'push'プロパティまたはメソッドをサポートしていません。
> とエラーメッセージが表示されます。

状況からすると、『obj[this.id] === undefined』が false であり、
かつ『obj[this.id] instanceOf Array』も false な状態なのだと思います。

まずは、問題発生時の this.id の値を確認して、想定している通りの
id 値が渡されているかをチェックしてください。(null や '' だったりとか…)

次に、push を呼び出す直前に
　var sType = Object.prototype.toString.call(obj[this.id]);
を呼び出して、上記が何という文字列を返すかを確認してみてください。
文字列の内容は "[object Array]" なのか、あるいはそれ以外なのかが鍵です。

> if(obj[this.id]===undefined)obj[this.id] = [];
> if (checkFlg == false) {
> 　//新規登録画面初期表示
> 　obj[this.id].push($(this).val()); ←このpushでエラー

上記では、obj[this.id] に対して配列がセットされる想定のコードになっているようですので、
変数 obj が、どの時点で生成されているのかを確認しておきましょう。
もしかしたらクロージャ指定を見誤っていて、別の obj 変数とスコープを勘違いしているかもしれません。

obj 変数のスコープには問題が無いのだとしたら、次は配列インスタンスの管理。
現状では、チェックボックスに対しては『配列』がセットされていて、
> obj[this.id] = [];
ラジオボタンに対しては『文字列』がセットされる想定のようです。
> obj[this.id] = this.value;

Array には push メソッドがありますが、
String に push メソッドは無いですよね。

■No94014 (魔界の仮面弁士さん) に返信
> ここの掲示板では、新規投稿時に
> 「半角カナは使用しないでください。文字化けの原因になります。]
> という注意書きが表示されていたかと思います。
> 次回以降ご留意ください。

すみません、ご指摘ありがとうございます。
編集しました。

> まずは、問題発生時の this.id の値を確認して、想定している通りの
> id 値が渡されているかをチェックしてください。(null や undefined だったりとか…)

null や undefinedではなくチェックボックスのIDがはいっていました…。
間違いではないと思うのですが…。

> 次に、push を呼び出す直前に
> 　var sType = Object.prototype.toString.call(obj[this.id]);
> を呼び出して、上記が何という文字列を返すかを確認してみてください。
> 文字列の内容は "[object Array]" なのか、あるいはそれ以外なのかが鍵です。

[object String]となっていました。

> 上記では、obj[this.id] に対して配列がセットされる想定のコードになっているようですので、
> 変数 obj が、どの時点で生成されているのかを確認しておきましょう。
> もしかしたらクロージャ指定を見誤っていて、別の obj 変数とスコープを勘違いしているかもしれません。

var obj = localStorage;
と一番頭に宣言しています。

> obj 変数のスコープには問題が無いのだとしたら、次は配列インスタンスの管理。
> 現状では、チェックボックスに対しては『配列』がセットされていて、
>>obj[this.id] = [];
> ラジオボタンに対しては『文字列』がセットされる想定のようです。
>>obj[this.id] = this.value;
>
> Array には push メソッドがありますが、
> String に push メソッドは無いですよね。

なるほど、だとするとどうしたらいいのでしょうか…。

■No94015 (初さん) に返信
> null や undefinedではなくチェックボックスのIDがはいっていました…。
> 間違いではないと思うのですが…。

同じ id が、ラジオボタンにも誤って付与されていたということはありませんか?

HTML 中で同一の id が競合することは認められていませんが、
もしも存在していたとしたら、今回の事象が発生しうるかと思います。

> なるほど、だとするとどうしたらいいのでしょうか…。

デバッグしてください。それができるのはソースコードを持っている初さんだけです。

■No94016 (魔界の仮面弁士さん) に返信
> 同じ id が、ラジオボタンにも誤って付与されていたということはありませんか?

同じidが付与されていることはありませんでした。
objの中身を確認したのですが、チェックボックスのチェックを付けても外しても""となっていたのですが
それは関係ないですか？

■No94017 (初さん) に返信
> 同じidが付与されていることはありませんでした。
localStorage を使っているという事なので、該当ページだけではなく、
別画面で同じ id があれば、影響を受ける可能性がありそうですが、
その点は問題ありませんか?

> objの中身を確認したのですが、
どの時点で、どうやって確認されましたか?

■No94019 (魔界の仮面弁士さん) に返信
> localStorage を使っているという事なので、該当ページだけではなく、
> 別画面で同じ id があれば、影響を受ける可能性がありそうですが、
> その点は問題ありませんか?

その点も問題ありません。

> どの時点で、どうやって確認されましたか?

var sType = Object.prototype.toString.call(obj[this.id]);
のところで、デバックし確認しました。
obj[this.id].push($(this).val()); の前です。

手元の環境で実験してみてました。

var ary = [];
var id = "test";
localStorage[id] = ary;
console.log( Object.prototype.toString.call( ary ) );
console.log( Object.prototype.toString.call( localStorage["test"] ) );

上記を実行したところ、
　[object Array]
　[object String]
と出力されました。

localStorage["test"] = ["123", 456, true];
console.log( localStorage["test"] );

上記を実行したところ、
　123,456,true
と出力されました。

つまり、変数 obj が localStorage である以上、
　localStorage["test"] = ["123", 456, true];
は
　localStorage["test"] = ["123", 456, true].toString();
すなわち
　localStorage["test"] = "123,456,true";
相当になるという事のようです。

これはつまり、
　obj[this.id] = [];
が、
　obj[this.id] = "";
として扱われてしまうことを意味します。
文字列なので、当然 push できません。

配列であることにこだわらず、
　obj[this.id] += (',' + $(this).val());
のような文字列前提の設計に切り替えては如何でしょう。

どうしても push したいなら、ちょっと手間ですが、
　obj[this.id] = JSON.stringify([]);
にしておいて、
　var ary = JSON.parse(obj[this.id]);
　ary.push($(this).val());
　obj[this.id] = JSON.stringify(ary);
として呼び出すとか。

C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[7]: JavaScript pushについて

過去ログには書き込み不可

Re[7]: JavaScript　pushについて