Jquery Map Array Keys and Values
Can anyone tell me what I've done wrong?
Very little! :-)
- In your
$.map
callback, the first argument will be the element, not its value, so you just use itsvalue
property. - You also were wrapping it in an array (
return [value]
), which you don't want to do;$.map
will build an array from the values you return from each call to the callback. - Also, you were using
input.items
where you wantedinput.item
. You don't need to declare the
index
argument if you don't use it.$('button#despatchOrder').on('click', function() {
var values = $("input.item"); // *** var myArray = $.map(values, function(element) { // *** return element.value; // *** }); console.log(myArray);
});
Example:
$('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>
That gives you the items in the array without using the item[1]
and such name. What you've shown that you want
items = [
1 => 1,
2 => 50,
3 => 12
]
isn't valid JavaScript. The above gives you:
myArray = ["1", "50", "12"];
but if you want name/value pairs, probably an array of objects would be best:
myArray = [
{name: "1", value: "1"},
{name: "2", value: "50"},
{name: "3", value: "12"}
]
To do that:
var myArray = $.map(values, function(element) {
return {name: element.name.substring(5, 6), value: element.value};
});
Or of course if you want the whole name item[1]
, just remove the substring
part.
Example:
$('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>
Just for completeness, you can also use the other map
function (jQuery has two), but it doesn't do you any real good here:
var myArray = values.map(function() {
return this.value;
}).get();
Note the .get()
at the end.
Dev.W
Updated on July 22, 2022Comments
-
Dev.W almost 2 years
I've looked into this on other StackOverFlow Questions and I can't seem to 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'm trying to get the results of each item input and send them via Ajax to my controller, this is fine when using the form action="" method but via ajax I can't seem to format the data in the array format.
Can anyone tell me what I've done wrong?
$('button#despatchOrder').on('click', function() { var values = $("input.items"); var myArray = $.map(values, function(value, index) { return [value]; }); console.log(myArray); });
Unfortunately Jquery isn't my strongest language but I'm learning. I was expecting the output to be something like.
items = [ 1 => 1, 2 => 50, 3 => 12 ]
But I have everything associated to the input like
Input 1 = [ accept accessKey alt etc etc ]