ReynierPM ReynierPM - 24 days ago 13
Javascript Question

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:

<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 instanceof Array && 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>';
});

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

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


The idea is to have the following output:

asset_locations_name in (1213381233,1213551233,1213551255)


My code is almost working but I am getting:

asset_locations_name in( 121338123312135512331213551255 )


The trick here is I can't do a
data_values.join()
because I need the value of each to add as a
data-id
property on the span itself.

Any other clean solution? Any help is welcome!

I forgot to mention there is a Fiddle here ready to play with.

Answer

What about this?

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 instanceof Array && 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 here
      var 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.

Comments