Concatenate for...in into single string-CodePudding

I have an object of URL parameters that I had originally appended to a form using this method, but I am attempting to adjust that to also create a single string concatenated from each of the values of the inputs to then.

I have this code here, which creates the inputs and prepends them to the top of the form:

for (property in parameters) {
    $('<input>', {
        type: 'hidden',
        id: `${property}`,
        class: 'urlparameter',
        name: `${property}`,
        value: `${property}: ${parameters[property]}`
     }).prependTo('form');
}

That code creates this inputs, from the testing URL I am currently using:

<input type="hidden" id="utm_content"  name="utm_content" value="utm_content: comm">
<input type="hidden" id="utm_medium"  name="utm_medium" value="utm_medium: email">
<input type="hidden" id="utm_source"  name="utm_source" value="utm_source: sig">

From there, I am trying to loop through all the inputs with the class urlparameter and grab the value and append it to the previous input value for a single string. Right now I am just trying to console.log them just for testing sake. No matter what I do, it keeps listing them all individually, or I break the syntax and can't figure out how to fix it.

The only way that comes close is this:

var inputs = $(".urlparameter");
for(var i = 0; i < inputs.length; i  ){
    let inputvalue = $(inputs[i]).val();
    console.log(inputvalue   ",");
}

This creates the following:

utm_content: comm,

utm_medium: email,

utm_source: sig,

What I am trying to get is: utm_content: comm, utm_medium: email, utm_source: sig,

How do I get them all to iterate and add to a single string on one line?

CodePudding user response：

Use .map() and .join().

console.log(inputs.map((i, el) => el.value).get().join(','));

CodePudding user response：

You can use .map to get all the values, convert to an array, then call Array#join.

let res = $(".urlparameter").map((i, el) => $(el).val()).toArray().join(', ');
console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="utm_content"  name="utm_content" value="utm_content: comm">
<input type="hidden" id="utm_medium"  name="utm_medium" value="utm_medium: email">
<input type="hidden" id="utm_source"  name="utm_source" value="utm_source: sig">

CodePudding user response：

I would suggest using reduce, which is JavaScript's version of an accumulator.

console.log(
Array.prototype.reduce.call($('input.urlparameter'),(p,v) => p   v.value   ', ',"")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="utm_content"  name="utm_content" value="utm_content: comm">
<input type="hidden" id="utm_medium"  name="utm_medium" value="utm_medium: email">
<input type="hidden" id="utm_source"  name="utm_source" value="utm_source: sig">