Jquery Map Array Keys and Values

Question

I studied this on other StackOverFlow questions and I cannot find the answer.

I have a form.

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

I try to get the results of each input of an element and send them through Ajax to my controller, this is normal when using the action = "" method, but through ajax I can not format the data into an array.

Can someone tell me what I did wrong?

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

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

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

    console.log(myArray);

});

Unfortunately, jQuery is not my strongest language, but I am learning. I expected the result to be something like.

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

But I have everything related to the input like

Input 1 = [
accept
accessKey
alt 
etc
etc
]

Answer 1

Can someone tell me what I did wrong?

Very little!: -)

• $.map , , 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>

---

map ( jQuery ), - :

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

.get() .

Answer 2

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"}