jQueryでテキストボックスのdata属性と、テキストボックス内の文字列を取得し、各値を連想配列のkeyとvalueの関係に定義したい。

前提

CakePHPを使用してタスク管理アプリを作成しています。

全てのタスク名を一度に変更する機能を実装しようとしています。

目的

jQueryで各テキストボックス内の文字列（タスク名）と、各テキストボックスに設定してあるdata属性（タスクのid）が
連想配列でkeyとvalueの関係になるように取得したいです。

※ 最終的にはAjax通信でサーバーへ取得データを送りModelに値を渡し、
下記SQL文に値を当てはめてUPDATE処理をかけたいと思っています。

UPDATE table_name SET name = 取得したタスク名 WHERE id = 取得したタスクのid;

該当のソースコード

タスク名を変更する画面として、多少簡略化しております。

html
1
2    <body>
3
4        <div id="tasklist">
5            <ul>
6                <li>
7                    <input type="text" data-task-id="10">
8                </li>
9                <li>
10                    <input type="text" data-task-id="20">
11                </li>
12                <li>
13                    <input type="text" data-task-id="30">
14                </li>
15            </ul>
16        </div>
17
18        <button id="submit">PUSH</button>
19
20    </body>
21
22

js
1
2$(function(){
3
4    // リストのdata属性を取得
5    $(document).on('click','#submit', function () {
6
7        let tasklist = [];
8
9        $('#tasklist input').each(function () {
10
11            // inputタグのdata属性を取得
12            let id = $(this).data('task-id');
13
14            // inputタグ(テキストボックス内)の文字列を取得
15            let name = $(this).val();
16
17            tasklist[id] = name;
18
19        });
20
21        console.log(tasklist);
22
23    });
24
25});
26

問題点

上記ソースコードにて、テキストボックスに入力した文字列と設定されている各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

以上になります。

お力をいただければと思います、よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、JavaScriptには連想配列が（厳密には）ありません。
tasklist[id] = name;のidに数値10が入った場合、10番目の配列要素にnameを代入することになります。（0-9は未定義の配列要素）

js
1      //let tasklist = [];
2        let tasklist = {}; // 配列ではなくオブジェクト
3
4        $('#tasklist input').each(function () {
5            // inputタグのdata属性を取得
6            let id = $(this).data('task-id');
7            // inputタグ(テキストボックス内)の文字列を取得
8            let name = $(this).val();
9
10            tasklist[id] = name;
11        });
12```もしくは
13
14```js
15        let tasklist = [];
16
17        $('#tasklist input').each(function () {
18            // inputタグのdata属性を取得
19            let id = $(this).data('task-id');
20            // inputタグ(テキストボックス内)の文字列を取得
21            let name = $(this).val();
22
23          //tasklist[id] = name;
24            tasklist.push( {'id':id,'name':name} ); // オブジェクトの配列にする
25        });