How to add strings together with in a .each loop in jQuery

Question

I am having so trouble joining up strings within jquery. I have tried a number of ways but keep over writing the first string variable leaving just the last entry.

My strings are coming in through a loop where the loop gets the val of some input boxes. It needs to be done like this as the script will eventually add more input boxes when user needs them and so they will not have individual id's.

The code is below, what i am trying to get on the output div is the following

"Apple,Fruit,10,Carrot,Veg,5,test,test2,8"

but at the moment i am only getting "88,"

var value = '';
$('#submit').click(function(){
  $('li').each(function(){
    $('input').each(function(){
      value = $(this).val();
      value += value + ',';
    })
  })
  $('#out').html(value);
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      src="https://code.jquery.com/jquery-3.4.1.js"
      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
      crossorigin="anonymous"
    ></script>
</head>
  <body>
    <ul id="ingrediants">
      <li>
        <input type="text" value="Apple" data-id="itemName">
        <input type="text" value="Fruit" data-id="description">
        <input type="text" value="10" data-id="qty">
      </li>
      <li>
        <input type="text" value="Carrot" data-id="itemName">
        <input type="text" value="Veg" data-id="description">
        <input type="text" value="5" data-id="qty">
      </li>
      <li>
        <input type="text" value="test" data-id="itemName">
        <input type="text" value="test2" data-id="description">
        <input type="text" value="8" data-id="qty">
      </li>
    </ul>
    <button id="submit">Submit</button>
    <div id="out"></div>
  </body>
</html>

@BrettGregson Straight up answers should be posted as answers, not comments — Taplar
– Taplar, Commented Jan 17, 2020 at 16:13
@Taplar by the time my fiddle was created there were 4 answers, no point in repeating another similar answer, and no point in wasting the fiddle — Brett Gregson
– Brett Gregson, Commented Jan 17, 2020 at 16:17
You're missing the point. Just as we discourage people from making questions that consist only of links to external snippet sites, the same goes for answers, and comment that should be answers. @BrettGregson — Taplar
– Taplar, Commented Jan 17, 2020 at 16:18

Taplar · Accepted Answer · 2020-01-17 16:29:08Z

2

Just select all the inputs, map their values, and then join them by commas. You don't need to explicitly write the each statements.

value = $('li input').map((index, it) => it.value).get().join(',');

Working sample:

$('#submit').click(function() {
  // arrow function supported browsers
  var value = $('li input').map((index, it) => it.value).get().join(',');
  // non-arrow function supported browsers (older IE for example)
  var value = $('li input').map(function(index, it) { return it.value; }).get().join(',');
  $('#out').text(value);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="ingrediants">
  <li>
    <input type="text" value="Apple" data-id="itemName">
    <input type="text" value="Fruit" data-id="description">
    <input type="text" value="10" data-id="qty">
  </li>
  <li>
    <input type="text" value="Carrot" data-id="itemName">
    <input type="text" value="Veg" data-id="description">
    <input type="text" value="5" data-id="qty">
  </li>
  <li>
    <input type="text" value="test" data-id="itemName">
    <input type="text" value="test2" data-id="description">
    <input type="text" value="8" data-id="qty">
  </li>
</ul>
<button id="submit">Submit</button>
<div id="out"></div>

edited Jan 17, 2020 at 16:29

answered Jan 17, 2020 at 16:10

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user2669997 Over a year ago

This did not work, do you have any links where I can learn this or is it just jquery map that i need to search

Rory McCrossan Over a year ago

It should be map((i, it) => it.value). This approach is by far the best way to do what you need, though

fdomn-m Over a year ago

Added a working sample of .map as it's much more succinct that using a for loop and powerful tool to learn: api.jquery.com/map

Taplar Over a year ago

Ahhhh, I forgot the index that jQuery injects. :(

Taplar Over a year ago

@freedomn-m updated the snippet you added to use the correct arrow function version

|

ZiNNED · Accepted Answer · 2020-01-17 16:09:29Z

1

You're reassigning the value variable each time in your for-loop. Change it to the following:

var value = '';
$('#submit').click(function(){
  $('li').each(function(){
    $('input').each(function(){
      value += $(this).val() + ',';
    })
  })
  $('#out').html(value);
})

answered Jan 17, 2020 at 16:09

ZiNNED

2,64022 silver badges32 bronze badges

Comments

Matti Price · Accepted Answer · 2020-01-17 16:09:33Z

1

You are resetting the value of your value variable in the loop.

var value = '';
$('#submit').click(function(){
  $('li').each(function(){
    $('input').each(function(){
      value = $(this).val(); //THIS LINE!
      value += $(this).val() + ","; //USE THIS INSTEAD
      value += value + ',';
    })
  })
  $('#out').html(value);
})

answered Jan 17, 2020 at 16:09

Matti Price

3,54118 silver badges32 bronze badges

Comments

Diogo Lessa · Accepted Answer · 2020-01-17 16:51:41Z

-1

You need to remove the 'li' each:

Like so:

EDIT:

var value = '';
$('#submit').click(function(){
    $('input').each(function(){
      value += $(this).val() + ',';
    })
  $('#out').html(value);
})

edited Jan 17, 2020 at 16:51

answered Jan 17, 2020 at 16:09

Diogo Lessa

1775 bronze badges

2 Comments

ZiNNED Over a year ago

You're still reassigning the value variable in your each-loop. Plus you will take all inputs outside the li list as well, which isn't wanted in this case.

Diogo Lessa Over a year ago

Sure, I was at lunch, on the cellphone and stuff... and missed that :P

Collectives™ on Stack Overflow

How to add strings together with in a .each loop in jQuery

4 Answers 4

7 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related