JavaScript append array to array from loop

Question

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

     
        
            DSCDS201020101
        
        
            Maximum online generations:
            30
            notes
        
        
            Default Retention Rule set:
            No default Retention rule set
            notes
        
        
            Default Backup Schedule set:
            No default Schedule set
            notes
        
        
            DSCDS901999102
        
        
            Maximum online generations:
            29
            notes
        
        
            Default Retention Rule set:
            30 days
            notes
        
        
            Default Backup Schedule set:
            Monday to Friday @ 21:00
            notes

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"

Rory McCrossan · Accepted Answer

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);



  
    DSCDS201020101
  
  
    Maximum online generations:
    30
    notes
  
  
    Default Retention Rule set:
    No default Retention rule set
    notes
  
  
    Default Backup Schedule set:
    No default Schedule set
    notes
  
  
    DSCDS901999102
  
  
    Maximum online generations:
    29
    notes
  
  
    Default Retention Rule set:
    30 days
    notes
  
  
    Default Backup Schedule set:
    Monday to Friday @ 21:00
    notes

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.

JavaScript append array to array from loop

Answers (1)

Related Questions