Question 35549 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Concatenate for…in into single string – Jquery

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" class="urlparameter" name="utm_content" value="utm_content: comm">
<input type="hidden" id="utm_medium" class="urlparameter" name="utm_medium" value="utm_medium: email">
<input type="hidden" id="utm_source" class="urlparameter" 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?

Tags:

3

Answers


  1. 0

    Use .map() and .join().

    console.log(inputs.map((i, el) => el.value).get().join(','));
    Login or Signup to reply.
  2. 0

    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" class="urlparameter" name="utm_content" value="utm_content: comm">
<input type="hidden" id="utm_medium" class="urlparameter" name="utm_medium" value="utm_medium: email">
<input type="hidden" id="utm_source" class="urlparameter" name="utm_source" value="utm_source: sig">
    Login or Signup to reply.
  3. 0

    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" class="urlparameter" name="utm_content" value="utm_content: comm">
<input type="hidden" id="utm_medium" class="urlparameter" name="utm_medium" value="utm_medium: email">
<input type="hidden" id="utm_source" class="urlparameter" name="utm_source" value="utm_source: sig">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search