CODEWITHSUNDEEP
jquery
user2669997
user2669997

Reputation:

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

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>

Upvotes: 0

Views: 52

Answers (4)

Diogo Lessa
Diogo Lessa

Reputation: 177

You need to remove the 'li' each:

Like so:

EDIT:

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

Upvotes: -1

Taplar
Taplar

Reputation: 24965

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>

Upvotes: 2

Matti Price
Matti Price

Reputation: 3551

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

Upvotes: 1

ZiNNED
ZiNNED

Reputation: 2650

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

Upvotes: 1

Related Questions