Is there a way to make split() to work with only one value?

If you change data-ids in the following code to a single string of 122 then split returns nothing and it should return 122.

/

var ids = $('div').data('ids').split(',');

$(ids).each(function(key, value) {
	$('div').append('Value: ' + value + '<br>');
});

<script src=".1.1/jquery.min.js"></script>
<div data-ids="122,154,344"></div>

Is there a way to make split() to work with only one value?

If you change data-ids in the following code to a single string of 122 then split returns nothing and it should return 122.

https://jsfiddle/mghwscox/

var ids = $('div').data('ids').split(',');

$(ids).each(function(key, value) {
	$('div').append('Value: ' + value + '<br>');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-ids="122,154,344"></div>

• javascript
• jquery
• split

• 1 To whomever downvoted, care to elaborate? This is a good question that helps to demonstrate an important "gotcha" with retrieving values from data attributes. – jeffdill2 Commented Apr 6, 2016 at 17:43

5 Answers 5

var ids = $('div').data('ids').toString().split(',');

$(ids).each(function(key, value) {
    $('div').append('Value: ' + value + '<br>');
});

Notice that I added toString() in your ids declaration.

data() tries to do a type conversion when it reads the data. So you have two choices.

You can use data() and have to use toString() to make sure you have a string.

var ids = $('div').data('ids').toString().split(',');

Other option is to not use data() and use attr() to read the value.

var ids = $('div').attr("data-ids").split(',');

With jQuery you can store the value as an plain array.

<div id="source" data-ids="[122,154,344]"></div>
<script>
    var list = $("#source").data('ids');
    console.log(list.length); //3
</script>

A working snippet:

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="source" data-ids="[122,154,344]"></div>
<div id="target"></div>

<script>
    var list = $("#source").data('ids');
    $("#target").html(JSON.stringify(list) + " has " + list.length + " elements"); // 3
</script>

note: the reason your code fails with one number is because jQuery converts the one number into a Number object and 'Number' objects have no split method.

When the users gives only one number it is taken as number and since split() method does not exists for numbers, its gives error. And if you provide ma-separated value it is getting treated as string and hence works fine.

var ids = $('div').data('ids');
console.log(ids,typeof ids);
ids = ids.toString().split(',');;

$(ids).each(function(key, value) {
	$('div').append('Value: ' + value + '<br>');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-ids="122"></div>

Try converting it to string before split

var ids = ($('div').data('ids')+'').split(',');


$(ids).each(function(key, value) {
    $('div').append('Value: ' + value + '<br>');
});