JSオブジェクトのループで上書きされてしまう

Question

###実現したいこと
HTMLのチェック状態を取得して、次のオブジェクトを得たいです

resuts = {
  "apple" : {"xxx":true, "yyy":false } ,
  "banana": {"zzz":true } 
};

###エラー
pushの前にfruits_nameがないと怒られます

Uncaught TypeError: resuts[fruits_name] is undefined

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

<input type="checkbox" name="apple" data-fruits_name="apple" data-frits_taste="xxx" checked="">
<input type="checkbox" name="apple" data-fruits_name="apple" data-frits_taste="yyy">
<input type="checkbox" name="banana" data-fruits_name="banana" data-frits_taste="zzz" checked="">

console.log( hoge() );
function hoge(){
  let resuts = {}; 
  $('input').each(function(i,e){
    const fruits_name = $(e).attr('data-fruits_name');
    const frits_taste = $(e).attr('data-frits_taste'); 
    const obj = { [frits_taste] : $(e).prop('checked') };
    resuts[fruits_name].push(obj);
  });
  return resuts;
}

###試したこと
エラーに従ってfruits_nameを追加してみたのですが、appleのxxxが得られませんでした。

console.log( hoge() );
function hoge(){
  let resuts = {}; 
  $('input').each(function(i,e){
    const fruits_name = $(e).attr('data-fruits_name');
    const frits_taste = $(e).attr('data-frits_taste'); 
    const obj = { [frits_taste] : $(e).prop('checked') };
    resuts[fruits_name] = []; // fruits_nameを追加
    resuts[fruits_name].push(obj);
  });
  return resuts;
}

こういったときにはどうすべきでしょうか？
宜しくお願い致します。

Answer 1

まず、英単語を略記するときは 母音（a,i,u,e,o） を省略すると通じやすいです。
resuts は 1つのオブジェクトを取得したいので、単に result（略記するとrslt）でよい。

function hoge(){
  let rslt = {}; 
  $('input').each(function(i,e){
    const fruits_name = $(e).data('fruits_name'); // jQueryの dataAPI で参照可
    const frits_taste = $(e).data('frits_taste'); 
    const obj = { [frits_taste] : $(e).prop('checked') };

    // jquery を用いて HTML から取得した値を確認
    console.log( fruits_name, frits_taste, $(e).prop('checked'), obj );
    // i==0 : "apple" "xxx" true Object { xxx: true }
    // i==1 : "apple" "yyy" false Object { yyy: false }
    // i==2 : "banana" "zzz" true Object { zzz: true }

    //rslt[fruits_name].push(obj); // 配列を処理しようとしている
    if( !relt.hasOwnProperty(fruits_name) ) {
      // プロパティが無いときは新規に付与
      rslt[fruits_name] = obj;
    }
    else {
      // プロパティが有るときは、値のオブジェクトを合成
      Object.assign( rslt[fruits_name], obj)
    }
  });
  return rslt;
}
let oj = hoge()
console.log( oj );
// => 求めるオブジェクト

console.log( JSON.stringify(oj) );
// => JSON で 送受信できる文字列に

• Google検索 jquery data api
• MDN Object#hasOwnProperty()
• MDN Object.assign()

こういったときにはどうすべきでしょうか？

1. 回答のコードにも残していますが、console.log() を用いて値をしっかり把握すること

（確認数が多い場合、log=[]のような配列に入れて console.table() も活用します）。
2. 反復処理で操作したい対象は、配列なのか、オブジェクトなのかを失念しないこと
（rslt = {} と初期化しているので、オブジェクトの操作です）。

Comments

[murati]

ありがとうございます。知らないメソッドや細部のテクニックなど大変勉強になりました。

Answer 2

resuts = {
  "apple" : {"xxx":true, "yyy":false } ,
  "banana": {"zzz":true } 
};

JSON形式で書くときキー項目は「"」で囲いましょう。
あと配列でないなら「[]」もいりません。

console.log(resuts["apple"]["xxx"]);
console.log(resuts["apple"]["yyy"]);
console.log(resuts["banana"]["zzz"]);

追記
質問者様がしたい事(ほしい結果)はこれで合っていますか？
(複数回実行想定の処理が無かったので一応追加)

console.log( hoge() );
function hoge(){
  let resuts = {}; 
  $('input').each(function(i,e){
    const fruits_name = $(e).attr('data-fruits_name');
    const frits_taste = $(e).attr('data-frits_taste'); 
    // const obj = { [frits_taste] : $(e).prop('checked') }; 
    if (!(fruits_name in resuts)) {               // 親要素の存在チェック
        resuts[fruits_name] = [];                 // 親要素の初期化
    }
    if (!(frits_taste in resuts[fruits_name])) {  // 子要素の存在チェック
        let obj = {};                             // 子要素の設定
        obj[frits_taste] = $(e).prop('checked');  // 子要素に値を設定
        resuts[fruits_name].push(obj);            // 親要素に子要素を追加
    }else{
        resuts[fruits_name][frits_taste] = $(e).prop('checked')　// 子要素に値を追加
    }
    console.log(resuts["apple"]["xxx"]);          // 確認用にコンソールに出力
  });
  return resuts;
}

Comments

[murati]

失礼しました。ご指摘の点修正しました。

[kuma_kuma_]

> 配列でないなら「[]」もいりません。
多分ここも直してないでしょう
> const obj = { [frits_taste] : $(e).prop('checked') };
は
> const obj = { frits_taste : $(e).prop('checked') };

[murati]

それですとキー名が「frits_taste 」になってしまいます。frits_taste は変数です。

[kuma_kuma_]

> let obj = {};
> obj[frits_taste] = $(e).prop('checked');
それならこっちで書いたら？

[murati]

コードレビューはありがたいのですが…

[kuma_kuma_]

正直いうとね質問者様の
「JSオブジェクトのループで上書きされてしまう」と
ソースコードの内容と
やりたいことの内容が全部バラバラなんです。
その為正確な答えが出せなくてこうではないか？という仮説で書かないといけない状態です。
適当に答えてるように見えるかもしれませんが一つづつうまくいかない可能性を
つぶしていっているのですよ？

[murati]

実現したいことは「HTMLのチェック状態を取得して、次のオブジェクトを得たいです」だけですので…

[kuma_kuma_]

うんじゃ説明しておくと
まずタイトル「JSオブジェクトのループで上書きされてしまう」となっているが
質問者様の内容からすると「HTMLのチェック状態を取得して、JSONオブジェクトを得たいです」が正しいよね？
次に得たい「JSONオブジェクト」を書いたまでは良かったんだけど書き方がまずかった(JSON形式ではなかった)※ 1回目の指摘ね
その為JSON形式は配列でほしいのか連想配列でほしいのかわからなくなってしまいました。
※ 2回目の指摘ね
さらに固定文字でほしいのか変数に入っている値で登録したいのかわからない
※ 3回目の指摘ね
という順番に聞いているわけだ。
回答に再度追記するけどこれが質問者様がしたかったこと？

[murati]

>回答に再度追記するけどこれが質問者様がしたかったこと？
いいえ…

[kuma_kuma_]

あとは「チェック」したときに値を取得しておきたいぐらいしか内容が思いつかないんだけれども？
(こちらではresutsに意図した形式でデータが入っている事は確認しています。)
なにが違いますか？

[kuma_kuma_]

> HTMLのチェック状態を取得して、次のオブジェクトを得たいです
取得できることを確認
> pushの前にfruits_nameがないと怒られます
これに関しても対策済み
> appleのxxxが得られませんでした。
判りやすくconsole.logを追加しておきます。
> resuts がグローバル変数で2回目以上実行した場合
想定して処理を追加しました。

判りやすくコメント追加しておきました。やりたいことはなんですか？
・連想配列ではなく配列でほしい。
・clickした際の更新したい。
・取得した値を後から使いたい。
あと思いつくのはこれぐらいです。