JavaScript append array to array from loop

Question

I have the below Table TDs that I need to get the values.

     <table style="border: 1px solid blue;margin: 15px;">
        <tr>
            <td class="drdsclient">DSCDS201020101</td>
        </tr>
        <tr class="drcheck">
            <td>Maximum online generations:</td>
            <td id="drcheckval" class="notopborder">30</td>
            <td id="drchecknotes" class="notopborder">notes</td>
        </tr>
        <tr class="drcheck">
            <td>Default Retention Rule set:</td>
            <td id="drcheckval" class="notopborder">No default Retention rule set</td>
            <td id="drchecknotes" class="notopborder">notes</td>
        </tr>
        <tr class="drcheck">
            <td>Default Backup Schedule set:</td>
            <td id="drcheckval" class="notopborder">No default Schedule set</td>
            <td id="drchecknotes" class="notopborder">notes</td>
        </tr>
        <tr class="drcheck">
            <td class="drdsclient">DSCDS901999102</td>
        </tr>
        <tr class="drcheck">
            <td>Maximum online generations:</td>
            <td id="drcheckval"  class="notopborder">29</td>
            <td id="drchecknotes" class="notopborder">notes</td>
        </tr>
        <tr class="drcheck">
            <td>Default Retention Rule set:</td>
            <td id="drcheckval"  class="notopborder">30 days</td>
            <td id="drchecknotes" class="notopborder">notes</td>
        </tr>
        <tr class="drcheck">
            <td>Default Backup Schedule set:</td>
            <td id="drcheckval"  class="notopborder">Monday to Friday @ 21:00</td>
            <td id="drchecknotes" class="notopborder">notes</td>
        </tr>
    </table>

I keep using IDs and Classes with the below JS code:

    var array1 = [];
        $(' .drdsclient ').each(function(){
            var obj = { 
                drdsc: $(" .drdsclient ").text(),
                drcheck1: $(" #drcheck1 " ).text(),
                drcheckval1: $(" #drcheckval1 ").text(),
                drchecknotes1: $(" #drchecknotes1 ").text(),
                drcheck2: $(" #drcheck2 " ).text(),
                drcheckval2: $(" #drcheckval2 ").text(),
                drchecknotes2: $(" #drchecknotes2 ").text(),
                drcheck3: $(" #drcheck3 " ).text(),
                drcheckval3: $(" #drcheckval3 ").text(),
                drchecknotes3: $(" #drchecknotes3 ").text()
            };
            var arr2 = array1.push(obj);
        });

But instead of appending to the array, it doubles the values and I get the below result:

[0]
    [drdsc] => "DSCDS201020101DSCDS901999102"
    [drcheck1] => "Maximum online generations:Maximum online generations:"
    [drcheckval1] => "30999"
    [drchecknotes1] => "notesnotes"
    [drcheck2] => "Default Retention Rule set:Default Retention Rule set:"
    [drcheckval2] => "No default Retention rule set30 days"
    [drchecknotes2] => "notesnotes"
    [drcheck3] => "Default Backup Schedule set:Default Backup Schedule set:"
    [drcheckval3] => "No default Schedule setMonday to Friday @ 21:00"
    [drchecknotes3] => "notesnotes"
[1]
    [drdsc] => "DSCDS201020101DSCDS901999102"
    [drcheck1] => "Maximum online generations:Maximum online generations:"
    [drcheckval1] => "30999"
    [drchecknotes1] => "notesnotes"
    [drcheck2] => "Default Retention Rule set:Default Retention Rule set:"
    [drcheckval2] => "No default Retention rule set30 days"
    [drchecknotes2] => "notesnotes"
    [drcheck3] => "Default Backup Schedule set:Default Backup Schedule set:"
    [drcheckval3] => "No default Schedule setMonday to Friday @ 21:00"
    [drchecknotes3] => "notesnotes"

Any way I can get an array like the below?

[0]
    [drdsc] => "DSCDS201020101"
    [drcheck1] => Maximum online generations:"
    [drcheckval1] => "30"
    [drchecknotes1] => "notes"
    [drcheck2] => "Default Retention Rule set:"
    [drcheckval2] => "No default Retention rule set"
    [drchecknotes2] => "notes"
    [drcheck3] => "Default Backup Schedule set:"
    [drcheckval3] => "No default Schedule set"
    [drchecknotes3] => "notes"
[1]
    [drdsc] => "DSCDS901999102"
    [drcheck1] => "Maximum online generations:"
    [drcheckval1] => "999"
    [drchecknotes1] => "notes"
    [drcheck2] => "Default Retention Rule set:"
    [drcheckval2] => "30 days"
    [drchecknotes2] => "notes"
    [drcheck3] => "Default Backup Schedule set:"
    [drcheckval3] => "Monday to Friday @ 21:00"
    [drchecknotes3] => "notes"

First off, id must be unique val in the html, it is bad practice to have same id on elements. — FrankCamara
– FrankCamara, Commented Mar 31, 2017 at 8:13
obj = [{ "abc":$("#something").text()},...] and then array1 += obj; — nullqube
– nullqube, Commented Mar 31, 2017 at 8:15

Rory McCrossan · Accepted Answer · 2017-03-31 08:18:07Z

4

There's a few issues in your code. First you've repeated the same id attribute in multiple places which is invalid. You need to change them to classes. Secondly in the JS code you're trying to read id that don't exist. It seems you're getting confused between id and the index of the element.

To actually achieve what you need you'll need to loop through the .drdsclient elements and retrieve all the following tr elements until the next .drdsclient. From there you can loop over those rows and build the object as required, like this:

var array1 = $('.drdsclient').map(function() {
  var $client = $(this);
  var $rows = $client.closest('tr').nextUntil('tr:has(.drdsclient)');
  var obj = {
    drdsc: $client.text()
  };
  
  $rows.each(function(i) { 
    var rowNum = i + 1;
    obj['drcheck' + rowNum] = $(this).find('td:first').text();
    obj['drcheckval' + rowNum] = $(this).find('td.drcheckval').text();
    obj['drchecknotes' + rowNum] = $(this).find('td.drchecknotes').text();
  });
  
  return obj;
}).get();

console.log(array1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="border: 1px solid blue;margin: 15px;">
  <tr>
    <td class="drdsclient">DSCDS201020101</td>
  </tr>
  <tr class="drcheck">
    <td>Maximum online generations:</td>
    <td class="drcheckval notopborder">30</td>
    <td class="drchecknotes notopborder">notes</td>
  </tr>
  <tr class="drcheck">
    <td>Default Retention Rule set:</td>
    <td class="drcheckval notopborder">No default Retention rule set</td>
    <td class="drchecknotes notopborder">notes</td>
  </tr>
  <tr class="drcheck">
    <td>Default Backup Schedule set:</td>
    <td class="drcheckval notopborder">No default Schedule set</td>
    <td class="drchecknotes notopborder">notes</td>
  </tr>
  <tr class="drcheck">
    <td class="drdsclient">DSCDS901999102</td>
  </tr>
  <tr class="drcheck">
    <td>Maximum online generations:</td>
    <td class="drcheckval notopborder">29</td>
    <td class="drchecknotes notopborder">notes</td>
  </tr>
  <tr class="drcheck">
    <td>Default Retention Rule set:</td>
    <td class="drcheckval notopborder">30 days</td>
    <td class="drchecknotes notopborder">notes</td>
  </tr>
  <tr class="drcheck">
    <td>Default Backup Schedule set:</td>
    <td class="drcheckval notopborder">Monday to Friday @ 21:00</td>
    <td class="drchecknotes notopborder">notes</td>
  </tr>
</table>

Also note that having incremental object properties isn't a very good idea. A better solution would be to build arrays of the values and place those in the properties of the object. This makes looping over the result much simpler.

answered Mar 31, 2017 at 8:18

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rory McCrossan Over a year ago

No problem. Don't forget to accept an answer if it helped

Sorin Pascan Over a year ago

Just realized that I need to loop through this array later on. Is there a way of just having drcheck instead of drcheck1, 2 and so on?

Rory McCrossan Over a year ago

Yes - you'd need to build three separate arrays as I mentioned at the end of my answer. If you have issues with that I'd suggest you start a new question about it

Collectives™ on Stack Overflow

JavaScript append array to array from loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related