web-dev-qa-db-ja.com

jqueryマップ配列のキーと値

他のStackOverFlowの質問でこれを調べましたが、答えが見つからないようです。

フォームがあります。

<input name="item[1]" class="item" value="1">
<input name="item[2]" class="item" value="50">
<input name="item[3]" class="item" value="12">

各項目入力の結果を取得し、Ajaxを介してコントローラーに送信しようとしています。これは、フォームのaction = ""メソッドを使用する場合は問題ありませんが、ajaxを使用すると、データを配列形式にフォーマットできないようです。

誰かが私が間違ったことを教えてもらえますか？

$('button#despatchOrder').on('click', function() {

    var values = $("input.items");

    var myArray = $.map(values, function(value, index) {
       return [value];
    });

    console.log(myArray);

});

残念ながら、jqueryは私の最強の言語ではありませんが、私は学んでいます。出力は次のようになると期待していました。

items = [
 1 => 1,
 2 => 50,
 3 => 12
]

しかし、私は次のような入力に関連するすべてのものを持っています

Input 1 = [
accept
accessKey
alt 
etc
etc
]
javascriptjqueryarraysajax
5
Dev.Wol

誰かが私が間違ったことを教えてもらえますか？

ほんの少し！ :-)

  • _$.map_コールバックでは、最初の引数は値ではなくelementになるため、valueプロパティを使用するだけです。
  • また、それを配列（_return [value]_）でラップしていましたが、これは不要です。 _$.map_は、コールバックへの各呼び出しから返された値から配列を構築します。
  • また、_input.items_が必要な場所で_input.item_を使用していました。

  • index引数を使用しない場合は、宣言する必要はありません。

    $（ 'button＃despatchOrder'）。on（ 'click'、function（）{

    _var values = $("input.item");                          // ***

var myArray = $.map(values, function(element) {        // ***
   return element.value;                               // ***
});

console.log(myArray);
_

    }）;

例：

_$('button#despatchOrder').on('click', function() {
    var values = $("input.item");
    var myArray = $.map(values, function(element) {
       return element.value;
    });
    console.log(myArray);
});_
_<input name="item[1]" class="item" value="1">
<input name="item[2]" class="item" value="50">
<input name="item[3]" class="item" value="12">
<button id="despatchOrder">Despatch</button><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_

これにより、_item[1]_とそのような名前を使用して、配列内の項目なしが得られます。あなたが望むことをあなたが示したこと

_items = [
 1 => 1,
 2 => 50,
 3 => 12
]
_

は有効なJavaScriptではありません。上記はあなたに与えます：

_myArray = ["1", "50", "12"];
_

ただし、名前と値のペアが必要な場合は、おそらくオブジェクトの配列が最適です。

_myArray = [
 {name: "1", value: "1"},
 {name: "2", value: "50"},
 {name: "3", value: "12"}
]
_

それを行うには：

_    var myArray = $.map(values, function(element) {
       return {name: element.name.substring(5, 6), value: element.value};
    });
_

またはもちろん、_item[1]_という名前全体が必要な場合は、substringの部分を削除するだけです。

例：

_$('button#despatchOrder').on('click', function() {
    var values = $("input.item");
    var myArray = $.map(values, function(element) {
       return {name: element.name.substring(5, 6), value: element.value};
    });
    console.log(myArray);
});_
_<input name="item[1]" class="item" value="1">
<input name="item[2]" class="item" value="50">
<input name="item[3]" class="item" value="12">
<button id="despatchOrder">Despatch</button><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_

完全を期すために、othermap関数を使用することもできます（jQueryには2つあります）が、ここでは実際には役に立ちません。

_var myArray = values.map(function() {
    return this.value;
}).get();
_

最後の.get()に注意してください。

7
T.J. Crowder

javaScriptには連想配列はありませんが、数値キーで要素にアクセスできます

$('button#despatchOrder').on('click', function() {

    var values = $("input.items");

    var myArray = $.map(values, function(value, index) {
       return $(value).val();
    });

    console.log(myArray);
    console.log(myArray[0]);

});

連想配列に似たものが必要な場合は、jsオブジェクトを使用する必要があります

{key:"value"}

0
madalinivascu