How to join array values in jQuery but formatting them?

Question

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.

Add + "," to the end your your li += <span then remove with substring, substr, or replace(/,$/, "") — fdomn-m
– fdomn-m, Commented Nov 10, 2016 at 14:30
You should also do $('body').append($('<ul>').append(li)); instead of just $('body').append(li);, which is invalid html. — Jose Rui Santos
– Jose Rui Santos, Commented Nov 10, 2016 at 14:35

Lucas Costa · Accepted Answer · 2016-11-10 14:30:01Z

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.

Fefux · Accepted Answer · 2016-11-10 14:29:36Z

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

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

answered Nov 10, 2016 at 14:29

Fefux

9845 silver badges12 bronze badges

1 Comment

Jose Rui Santos Over a year ago

The $('body').append(li); is incorrect, since li should have either an ol or an ul parent. It should be $('body').append($('<ul>').append(li)); instead.

Ricardo Seromenho · Accepted Answer · 2016-11-10 14:31:12Z

0

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)

answered Nov 10, 2016 at 14:31

Ricardo Seromenho

5292 silver badges7 bronze badges

Comments

Paul · Accepted Answer · 2016-11-10 14:32:05Z

-1

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(','))

answered Nov 10, 2016 at 14:32

Paul

395 bronze badges

Collectives™ on Stack Overflow

How to join array values in jQuery but formatting them?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related