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":""
      }
    ]
  }
]

Had this fiddle open in my clutter of tabs, but the question has been answered. Posting it here as an alternative, but feel free to ignore it ;) jsfiddle.net/h6x2sqk2/7 — Me.Name
– Me.Name, Commented Jun 1, 2017 at 10:29

Panagiotis Vrs · Accepted Answer · 2017-06-01 09:56:53Z

2

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

edited Jun 1, 2017 at 9:56

answered Jun 1, 2017 at 9:05

Panagiotis Vrs

8526 silver badges16 bronze badges

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

2 Comments

Sorin Pascan Over a year ago

Almost there. The problem is that I am not getting the values for the textareas.

Panagiotis Vrs Over a year ago

best approach though is to break it with classes under the same tr. Have fun !

UfguFugullu · Accepted Answer · 2017-06-01 09:12:18Z

0

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>

edited Jun 1, 2017 at 9:12

answered Jun 1, 2017 at 8:40

UfguFugullu

2,16715 silver badges19 bronze badges

3 Comments

Sorin Pascan Over a year ago

Do you mean changing .nextUntil('tr:has(.bkpsetdsc)'); to .nextUntil('tr:has(td.bkpsetdsc)'); ?

Sorin Pascan Over a year ago

This is just a very small example with 4 backup sets. In production I can have close to 100 backup sets so I don't think it would be advisable to have a table for each td.

UfguFugullu Over a year ago

You could add a pagination and don't show all at once. You can test this solution with up to 100 backup rows so you can find out the performance of this script. If it's not the best other people here may help you

Collectives™ on Stack Overflow

Build array with all elements with specific class using JS

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related