Push values to array as separate key value pairs-CodePudding

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, e.g.: 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"  name="Steve Smith">
      <tr>
          <td colspan="4">Steve Smith</td>
      </tr>
      <tr>
          <td></td>
          <td>2</td>
          <td></td>
          <td  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  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.

CodePudding user response：

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"  name="Steve Smith">
      <tr>
          <td colspan="4">Steve Smith</td>
      </tr>
      <tr>
          <td></td>
          <td>2</td>
          <td></td>
          <td  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  numbers="121840,121841">2</td>
      </tr>
    </tbody>
</table>