56

I have a string that's on the page and from which I want an array of int.

<div id="TheData">2,3,0,43,23,53</div>

I'm writing this:

var ArrayData = ($('#TheData').html()).split(',');

However, ArrayData becomes an array of strings. How can I get an array of ints? Note that some of the elements in the HTML can be equal to 0.

Thanks.

Amir
  • 1,328
  • 2
  • 13
  • 27
frenchie
  • 51,731
  • 109
  • 304
  • 510
  • possible duplicate of [To convert all elements in an array to integer in javascript?](http://stackoverflow.com/questions/4437916/to-convert-all-elements-in-an-array-to-integer-in-javascript) – Felix Kling Nov 22 '11 at 19:49

6 Answers6

69
var ArrayData = $('#TheData').html().split(',').map( Number );

Add Array.prototype.map() to older browsers with the code from MDN.

You can use jQuery's $.map() in the same manner, though it won't work with $.prototype.map().

var ArrayData = $.map( $('#TheData').html().split(','), Number );
RightSaidFred
  • 11,209
  • 35
  • 35
  • 1
    This will only return integers if there are only strings that convert to integers in the array. – kennebec Nov 22 '11 at 20:14
  • 1
    @kennebec: Well, yes. I'm afraid I don't understand the point you're making. – RightSaidFred Nov 22 '11 at 20:26
  • If the end-user alters the text to include decimals, you could end up with floats instead of ints. That may be okay in some scenarios, but it could cause unexpected results for those not expecting them. – Slobaum Apr 05 '13 at 01:12
42
var ArrayData = $.map($('#TheData').text().split(','), function(value){
    return parseInt(value, 10);
    // or return +value; which handles float values as well
});

You can use $.map to transform the array of strings to ints by calling parseInt on each of the elements in the array

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Keith.Abramo
  • 6,952
  • 2
  • 32
  • 46
  • 5
    It should be `$.map($('#TheData').text().split(','), function(){...});`. – Felix Kling Nov 22 '11 at 19:50
  • 1
    Note: This isn't an example of [`jQuery.map`](http://api.jquery.com/jquery.map/), but of [`Array#map`](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/map). – Jonathan Lonowski Nov 22 '11 at 19:51
  • This returned an array of NaN, needed to add function (n) ... parseInt(n, 10). – frenchie Nov 22 '11 at 19:51
  • Sorry about that guys @FelixKling thank you for setting me straight – Keith.Abramo Nov 22 '11 at 19:53
  • @frenchie Check out the [compatibility](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/map#Compatibility) implementation for support of `Array#map` in older browsers. Or the [ES5 shim](https://github.com/kriskowal/es5-shim) for a collection of them. – Jonathan Lonowski Nov 22 '11 at 19:54
  • @FelixKling: yes, your answer works; you should post it as such. – frenchie Nov 22 '11 at 19:55
  • Can you please give me the exact alternative in Javscript? I used `var data = parseInt(a.split(","));` but it didn't worked. – Gowtham Feb 09 '14 at 04:20
26

Pure Javascript solution:

const elementText = document.getElementById('divSourceID').innerText;
const numericList = elementText.split(',').map(Number);

For more information:

  1. getElementById: "The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly. (...)". Source: developer.mozilla.org.

  2. Array.prototype.map: "The map() method creates a new array populated with the results of calling a provided function on every element in the calling array". Source: developer.mozilla.org.

  3. array.map(Number): This call means the first received argument will be automatically converted into number and results in the same as if you explicitly declare the arrow function:

const numericList = elementText.split(',').map(Number);

same result as:

const numericList = elementText.split(',').map(str => Number(str));

JIT: Special thanks to @Robbendebiene for the excellent code review, simplifying the previous code.

Daniel Santana
  • 1,493
  • 20
  • 19
  • 1
    This function can be simplified to: `elementText.split(',').map(Number);` – Robbendebiene Jun 30 '20 at 08:30
  • 1
    Excellent point @Robendebiene, thank you. I will update my answer as some of the code I wrote as not necessary (split already returns an array, for example). Good catch. Thank you. – Daniel Santana Jul 02 '20 at 14:55
14
var ArrayData = $('#TheData').text().split(',').map(Number);

You can find more here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Tang Chanrith
  • 1,219
  • 12
  • 8
9

Here is a simple answer

let x = "1,2,3,4";

let result = x.split(",").map((e) => parseInt(e));

console.log(result);
Sufian
  • 6,405
  • 16
  • 66
  • 120
cpt.John
  • 143
  • 1
  • 9
2
var ArrayData = $('#TheData').html().split(',').map( d => { return parseInt(d) });

Use map function after Split, in callback of map you can parse that Integer

rabi jaiswal
  • 21
  • 2
  • Hi, welcome to the site! My apologies if I'm missing something, but isn't your answer pretty much what was already posted as the accepted answer? – E. T. May 20 '21 at 10:17