Combine the result of two input fields with JavaScript?

Question

I have as a result from an input form a couple of strings and I want them to convert them, so they fit as data for my ajax-request. I am looking for an easy way, but I can't get it right. Basically I want to convert/map this array:

[
{ name: "[1][apples]", value: "2" }
{ name: "[1][melons]", value: "1" }
{ name: "[2][apples]", value: "2" }
{ name: "[2][melons]", value: "4" }
{ name: "[3][apples]", value: "3" }
{ name: "[3][melons]", value: "2" }
]

into

[{"id": 1, "apples": 2, "melons": 1}, {"id": 2, "apples": 2, "melons": 4}, {...}]

Any idea? I would appreciate some hint? I could't not find an easy solution via html though.

Thanks

• Stephen P: So you're trying to collect [1][apples] and [1][melons] together, as, say order ID #1 which contains 2 apples (the value) and 1 melon?
• Stephen P: Also, are they always in-order like that? They'll never skip around like [1][apples] [2][apples] [1][melons] ? If you're guaranteed all the like-numbers are in sequence it simplifies the collection of them.
• Stephen P: Just thinking along the lines of iterating over the array, decoding the name of the object using let parts = theArray[i].name.match(/\[(\d)\]\[([a-z]+)\]/); which makes parts[1] the order number and parts[2] the product name. Anyway, just a thought that I didn't want to lose if I come back and write an answer.

Answer 1

you can use a for loop to access each element and display them. Refer to this link. For loop in multidimensional javascript array

Answer 2

Firstly, I have replaced the square brackets using a regular expression and formed a new array. After that, I have merged object having same ID using spread operator.

You can refer to the code below which solves this problem.

let array = [
 { name: "[1][apples]", value: "2" },
 { name: "[1][melons]", value: "1" },
 { name: "[2][apples]", value: "2" },
 { name: "[2][melons]", value: "4" },
 { name: "[3][apples]", value: "3" },
 { name: "[3][melons]", value: "2" }];
let newArray = [];
let result = [];
array.forEach((obj, i) => {
 let nameArray = obj.name.replace(/[\[\]']+/g, ' ').trim().split(' ');
 let o = {};
 o['id'] = parseInt(nameArray[0]);
 o[nameArray[1]] = obj.value;
 newArray.push(o);
});
for(let i = 0; i< newArray.length; i++) {
 for(let j = i+1; j < newArray.length; j++) {
 if(newArray[i].id === newArray[j].id) {
 let o = {...newArray[i], ...newArray[j]};
 result.push(o);`enter code here`
 }
 }
}
console.log('Final result', result);

Answer 3

Thanks for the input. I think my question needed to be more specific:

(1) Yes, they are always in order.

(2) My names of my input-tags in html appear to be an multidimensional array. This is not the case! I tried something, but it turned out to be for php.

I found the follow workaround:

function apiAdapter() {
 var arrayToCopy = $("#formsteps").serializeArray();
 var copiedArray = [];
 for (let i = 0; i < arrayToCopy.length; i += 2) {
 var id = arrayToCopy[i].name.slice(arrayToCopy[i].name.indexOf('[') + 1, arrayToCopy[i].name.indexOf(']'));
 copiedArray.push({ "id": id, "apples": arrayToCopy[i].value, "melons": arrayToCopy[i + 1].value })
 }
 return copiedArray;
}

As I am new to JavaScript I always look for better solutions. So thanks again for your posts.