質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 65

bonkura05

score 2

前提

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

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

目的

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

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

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

該当のソースコード

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

    <body>

        <div id="tasklist">
            <ul>
                <li>
                    <input type="text" data-task-id="10">
                </li>
                <li>
                    <input type="text" data-task-id="20">
                </li>
                <li>
                    <input type="text" data-task-id="30">
                </li>
            </ul>
        </div>

        <button id="submit">PUSH</button>

    </body>
$(function(){

    // リストのdata属性を取得
    $(document).on('click','#submit', function () {

        let tasklist = [];

        $('#tasklist input').each(function () {

            // inputタグのdata属性を取得
            let id = $(this).data('task-id');

            // inputタグ(テキストボックス内)の文字列を取得
            let name = $(this).val();

            tasklist[id] = 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


以上になります。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

まず、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} ); // オブジェクトの配列にする
        });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/04 03:13

    どちらも試させて頂き、値の確認も取れました..
    よく理解できました、ご回答どうもありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • PHPに関する質問
  • jQueryでテキストボックスのdata属性と、テキストボックス内の文字列を取得し、各値を連想配列のkeyとvalueの関係に定義したい。