I need to create a javascript (jquery) array with duplicated key name like next one
{
"apple": "type1",
"apple": "type2",
}
Here is my current code I stack with
var data = {};
jQuery.each(formData, function(i, field) {
data[field.name] = field.value;
});
In above example field.name is "apple" have different values like "type1" or "type2".
With my current code when same field.name in jQuery.each I got removed/erased "apple":"type1"
This is not a jQuery problem, but rather it is to do with the nature of objects in javascript. You can't store multiple values on the same key (how would you access them?).
What you can do is store an array on a key, and add to that:
const formData = jQuery('input');
let data = {};
jQuery('button').click(function() {
data = {}
jQuery.each(formData, function(i, field) {
data[field.name] = data.hasOwnProperty(field.name)
? [...data[field.name], field.value]
: [field.value]
});
console.dir(data);
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="a" />
<input name="b" />
<input name="b" />
<button>Test</button>What the above code does is use an array against a key, and add to that array for each item.
You can do this without jQuery, and without an each, you may or may not prefer this option:
const button = document.querySelector('button');
const getAll = selector => Array.prototype.slice.call(
document.querySelectorAll(selector)
);
let data = {};
button.onclick = () => {
data = getAll('input')
.reduce((result, element) => ({
...result,
[element.name]: result.hasOwnProperty(element.name)
? [...result[element.name], element.value]
: [element.value]
}), {})
console.dir(data)
}<input name="a" />
<input name="b" />
<input name="b" />
<button>Test</button>
... mean in the [...data[field.name]?