Push values to array as separate key value pairs

Question

I have a project where I'm adding values from an attribute (comma separated integers) on a particular cell in each row of a table to an array in JS.

I know that if I create an array called myArray, then use myArray.push(121840,121841); the myArray.length result would be 2. This is what I expected. I had assumed (incorrectly) that since the value of the numbers attribute was the same format, eg: numbers="121840,121841" , then the result would be the same using myArray.push($(this).attr('numbers')); , but I was mistaken as the length of that array is 1, instead of 2.

See below an example of what I'm trying to do and the issue I'm encountering.

Given a table like this where I'm grabbing the values from the last cell's numbers attribute:

<table border="1" width="100%">
    <tbody emp-id="02" class="" name="Steve Smith">
      <tr>
          <td colspan="4">Steve Smith</td>
      </tr>
      <tr>
          <td></td>
          <td>2</td>
          <td></td>
          <td class="total" numbers="121856,121860">2</td>
      </tr>
    </tbody>
    <tbody emp-id="01" name="Marky Mark">
      <tr>
          <td colspan="4">Marky Mark</td>
      </tr>
      <tr>
          <td>1</td>
          <td></td>
          <td>1</td>
          <td class="total" numbers="121840,121841">2</td>
      </tr>
    </tbody>
</table>

My JS would is:

$('table tbody tr').each(function() {
  $(this).find('td:last').each(function(){
    if ($(this).attr('numbers')) {
        numbers.push($(this).attr('numbers'));
      names.push($(this).parents("tbody").attr('name'));
    }
  });
});

In the above example, the array has the correct number values stored, (121856,121860,121840,12184), but the length is given as 2 as each cell's values was added as a single element, such that number[0]=121856,121860, instead of 121856.

How would I correct this so that each integer within the attribute is added as a single element?

JSFiddle: http://jsfiddle.net/jacbhg0n/3/

Any help would be greatly appreciated.

Answer 1

You can simply achieve that by splitting the numbers attribute string by using String.split() method while pushing it into the numbers array.

Live Demo :

 const numbers = []; const names = []; $('table tbody tr').each(function() { $(this).find('td:last').each(function(){ if ($(this).attr('numbers')) { numbers.push($(this).attr('numbers').split(',')); names.push($(this).parents("tbody").attr('name')); } }); }); console.log(numbers.flat());

 <table border="1" width="100%"> <tbody emp-id="02" class="" name="Steve Smith"> <tr> <td colspan="4">Steve Smith</td> </tr> <tr> <td></td> <td>2</td> <td></td> <td class="total" numbers="121856,121860">2</td> </tr> </tbody> <tbody emp-id="01" name="Marky Mark"> <tr> <td colspan="4">Marky Mark</td> </tr> <tr> <td>1</td> <td></td> <td>1</td> <td class="total" numbers="121840,121841">2</td> </tr> </tbody> </table>