Build array with all elements with specific class using JS

Question

I have a table with multiple rows. I need to get the text from specific rows and build an array which I can pass on and access later. I created a jsfiddle with the code that I am using:

https://jsfiddle.net/h6x2sqk2/3/

The problem is that everything is doubled:

[
  {
    "drdsc":"DSCDS0101101",
    "bkpsets":[
      {
        "backpset":"Backup1",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup2",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup3",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup4",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      }
    ]
  },
  {
    "drdsc":"DSCDS0202202",
    "bkpsets":[
      {
        "backpset":"Backup1",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup2",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup3",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup4",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      }
    ]
  }
]

Result that I need is:

[
  {
    "drdsc":"DSCDS0101101",
    "bkpsets":[
      {
        "backpset":"Backup1",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup2",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      },
      {
        "backpset":"Backup3",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      }
    ]
  },
  {
    "drdsc":"DSCDS0202202",
    "bkpsets":[
      {
        "backpset":"Backup4",
        "srvrolenotes":"",
        "setsize1notes":"",
        "setsize2notes":""
      }
    ]
  }
]

Answer 1

Try my suggestion here. What i did is to read from one backup till the other what you have in the tr sections

working example

    $( document ).ready(function() {
    var dscarray = $('.bkpsrvdsc').map(function() {
      var $dsclient = $(this);
      var $rows = $dsclient.closest('tr').nextUntil('tr:has(.drbkpsetdsc)');

      var drbkparray = $dsclient.closest('tr').nextUntil('tr:has(.bkpsrvdsc)').find('.drbkpset').parent().map(function() {
        var $backuppset = $(this);
        var obj = { backpset: $backuppset.text() };
var $rows = $backuppset.closest('tr').nextUntil('tr:has(.drbkpset)');
          obj['srvrolenotes'] = $rows.find('.srvrolenotes').val();
          obj['setsize1notes'] = $rows.find('.setsize1notes').val();
          obj['setsize2notes'] = $rows.find('.setsize2notes').val();

        return obj;
      }).get();

      var obj = { drdsc: $dsclient.text(), bkpsets: drbkparray };

      return obj;

    }).get();

  console.log(dscarray);
});

Answer 2

Your $rows get more then one row because .nextUntil('tr:has(.drbkpsetdsc)') runs through the complete table and not until the next .bkpsrvdsc

It could be easier if you put a table into a td.bkpsrvdsc

$(document).ready(function() {
  var dscarray = $('.bkpsrvdsc').map(function() {
    var bkpsrvdsc = $(this);

    return {
      name: $(this).find('tr:first-child > td').text(),
      contents: bkpsrvdsc.find('.drbkpset').map(function() {
        return {
          backpset: $(this).text(),
          srvrolenotes: $(this).next('tr').find('.srvrolenotes').text(),
        }
      })
    }
  });

  console.log(dscarray);
});

.bkpsrvdsc table {
  width: 100%;
}
table th,
table td {
  width: 33.3333%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table style="width: 600px;">
  <thead>
    <tr>
      <th>DSC#</th>
      <th>Check</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3" class="bkpsrvdsc">
        <table>
          <tbody>
            <tr>
              <td>DSCDS0101101</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td colspan="2" class="drbkpset">Backup1</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>Server role</td>
              <td><textarea data-autoresize rows="1" placeholder="Type notes here..." class="srvrolenotes"></textarea></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td colspan="2" class="drbkpset">Backup2</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>Server role</td>
              <td><textarea data-autoresize rows="1" placeholder="Type notes here..." class="srvrolenotes"></textarea></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td colspan="3" class="bkpsrvdsc">
        <table>
          <tbody>
            <tr>
              <td>DSCDS0202202</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td colspan="2" class="drbkpset">Backup4</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>Server role</td>
              <td><textarea data-autoresize rows="1" placeholder="Type notes here..." class="srvrolenotes"></textarea></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>