質問: name; }); console.log(tasklist); }); }); ``` ### 問題点 上記ソースコードにて、**テキストボックスに入力した文字列**と**設定されている各data属性値**が連想配列のkey, valueの関係で取得できている状態です。 どちらがkeyでもvalueでも構わないのですが、keyが数値になった場合に、**0からその数値までの値**がemptyとして定義されてしまいます。 上記の場合ですとdata属性のtask-idをkeyとして設定していますが、keyが0~9、それから11~19 等の部分がemptyとして定義されてしまいます。↓ ※ テキストボックスにa,b,cと入力した場合のコンソール表示 (31) [empty × 10, "a", empty × 9, "b", empty × 9, "c"] 10: "a" 20: "b" 30: "c" length: 31 *proto*: Array(0) ### 試したこと ・ jQueryの$.each内で回っている回数を確認しましたが3回でした。 ・ 定義している変数「id」「name」の値は、$.each内では正常にコンソールに表示できました。 ・ $.each内の一番下で、変数tasklistをコンソール表示させると下記になりました。 (11) [empty × 10, "a"] (21) [empty × 10, "a", empty × 9, "b"] (31) [empty × 10, "a", empty × 9, "b", empty × 9, "c"] ### 環境 windows10 PHP ver7.3.8 CakePHP ver3.8 --- 以上になります。 お力をいただければと思います、よろしくお願いします。
回答: まず、JavaScriptには連想配列が(厳密には)ありません。 `tasklist[id] = name;`のidに数値10が入った場合、10番目の配列要素にnameを代入することになります。(0-9は未定義の配列要素) ``` //let tasklist = []; let tasklist = {}; // 配列ではなくオブジェクト $('#tasklist input').each(function () { // inputタグのdata属性を取得 let id = $(this).data('task-id'); // inputタグ(テキストボックス内)の文字列を取得 let name = $(this).val(); tasklist[id] = name; }); ``` もしくは ``` let tasklist = []; $('#tasklist input').each(function () { // inputタグのdata属性を取得 let id = $(this).data('task-id'); // inputタグ(テキストボックス内)の文字列を取得 let name = $(this).val(); //tasklist[id] = name; tasklist.push( {'id':id,'name':name} ); // オブジェクトの配列にする }); ```