How To Join Array Values In Jquery But Formatting Them?

I have the following input in Javascript: ['1213381233', '1213551233', '1213551255'] and I need to join them and format them. Take a look to the following example:

; var data_condition = 'in'; var data_values = ["1213381233", "1213551233", "1213551255"]; $("#segment_form").on('click', '#add_condition', function() { var li = ''; var has_parenthesis = false; if (data_condition == 'in' || data_condition == 'not in' || data_condition == 'between' || data_condition == 'not between') { has_parenthesis = true; } if (data_values instanceofArray && data_values.length >= 1) { li += '<li data-field="' + data_field + '" data-condition="' + data_condition + '">'; li += data_field + ' ' + data_condition; if (has_parenthesis) { li += '('; } $.each(data_values, function(index, value) { // Note the 'prefix' variable herevar prefix = (index == 0) ? '' : ', '; li += '<span title="Click to remove this item from the list" data-id="' + value + '">' + prefix + value + '</span>'; }); if (has_parenthesis) { li += ')'; } li += '</li>'; } console.log('data_field =>', data_field, 'data_condition => ', data_condition, 'data_values =>', data_values, 'li =>', li); $('body').append(li); });

I created a new fiddle with the solution.

Solution 2:

Just add ',' after all your value and get the substring without the last ','.

https://jsfiddle.net/v562vst9/2/

<div id="segment_form">
  <button id="add_condition">
    Click me
  </button>
</div>

var data_field = 'asset_locations_name';
var data_condition = 'in';
var data_values = ["1213381233", "1213551233", "1213551255"];

$("#segment_form").on('click', '#add_condition', function() {
  var li = '';
  var has_parenthesis = false;

  if (data_condition == 'in' || data_condition == 'not in' || data_condition == 'between' || data_condition == 'not between') {
    has_parenthesis = true;
  }

  if (data_values instanceofArray && data_values.length >= 1) {
    li += '<li data-field="' + data_field + '" data-condition="' + data_condition + '">';
    li += data_field + ' ' + data_condition;

    if (has_parenthesis) {
      li += '( ';
    }

    $.each(data_values, function(index, value) {
      li += '<span title="Click to remove this item from the list" data-id="' + value + '">' + value + '</span>,';
    });

    li = li.substr(0, li.length - 1);

    if (has_parenthesis) {
      li += ' )';
    }
    li += '</li>';
  }

  console.log('data_field =>', data_field, 'data_condition => ', data_condition, 'data_values =>', data_values, 'li =>', li);

  $('body').append(li);
});

Solution 3:

Add a comma if it's not the last element. Maybe something like this:

$.each(data_values, function(index, value) {
  li += '<span title="Click to remove this item from the list" data-id="' + value + '">' + value + '</span>';
  if (index !== data_values.length - 1) {
    li += ','
  }
});

Or remove the last comma after iterate.

$.each(data_values, function(index, value) {
  li += '<span title="Click to remove this item from the list" data-id="' + value + '">' + value + '</span>';
});
li.slice(0,-1)

Solution 4:

You need to use the js method 'join'

You should have a look to something like handlebars

var data_values = ["1213381233", "1213551233", "1213551255"];

alert(data_values.join(','))

Share