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

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, Mar 26 '20 at 21:30
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, Mar 26 '20 at 21:36
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. — Stephen P, Mar 26 '20 at 21:43

score 1 · Answer 1 · answered Mar 26 '20 at 18:26

1

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

answered Mar 26 '20 at 18:26

Niral Patel

9
2

score 0 · Answer 2 · answered Mar 27 '20 at 11:55

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);

score 0 · Accepted Answer · answered Mar 27 '20 at 12:06

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.

Combine the result of two input fields with JavaScript?

3 Answers3