TD Labels into object with Jquery?

Question

I have a table like below:

<table class="job-details">
                <tr class="spacer-row"><td class="graphic-cell"></td><td class="visible-cell"></td></tr>
                    <tr class="data-row unknown-bin-type" data-toggle="tooltip" title="Waste-15-021219">
                        <td class="graphic-cell"></td>
                        <td class="visible-cell reschedule-cell">
                            <label for="Friday">Friday</label> &nbsp;
                            <label for="">10/01/2020</label> &nbsp;
                            <label for="Deliver_CADDY">Deliver CADDY</label>
                        </td>
                    </tr>
                    <tr class="spacer-row"><td></td></tr>
                    <tr class="data-row non-recyclable-bin-type" data-toggle="tooltip" title="Waste-15-091219">
                        <td class="graphic-cell"></td>
                        <td class="visible-cell">
                            <label for="Monday">Monday</label> &nbsp;
                            <label for="">13/01/2020</label> &nbsp;
                            <label for="Empty_Standard_General_Waste">Empty Standard General Waste</label>
                        </td>
                    </tr>
                    <tr class="spacer-row"><td></td></tr>
                    <tr class="data-row recyclable-bin-type" data-toggle="tooltip" title="Waste-11 Organic-091219">
                        <td class="graphic-cell"></td>
                        <td class="visible-cell">
                            <label for="Monday">Monday</label> &nbsp;
                            <label for="">20/01/2020</label> &nbsp;
                            <label for="Empty_Standard_Mixed_Recycling">Empty Standard Mixed Recycling</label>
                        </td>
                    </tr>
                    <tr class="spacer-row"><td></td></tr>
                    <tr class="data-row green-waste-bin-type" data-toggle="tooltip" title="Waste-15-161219">
                        <td class="graphic-cell"></td>
                        <td class="visible-cell">
                            <label for="Monday">Monday</label> &nbsp;
                            <label for="">20/01/2020</label> &nbsp;
                            <label for="Empty_Standard_Garden_Waste">Empty Standard Garden Waste</label>
                        </td>
                    </tr>
                    <tr class="spacer-row"><td></td></tr>
                    <tr class="data-row non-recyclable-bin-type" data-toggle="tooltip" title="Waste-15-231219">
                        <td class="graphic-cell"></td>
                        <td class="visible-cell">
                            <label for="Monday">Monday</label> &nbsp;
                            <label for="">27/01/2020</label> &nbsp;
                            <label for="Empty_Standard_General_Waste">Empty Standard General Waste</label>
                        </td>
                    </tr>
                    <tr class="spacer-row"><td></td></tr>
                    <tr class="data-row green-waste-bin-type" data-toggle="tooltip" title="Waste-15-301219">
                        <td class="graphic-cell"></td>
                        <td class="visible-cell">
                            <label for="Monday">Monday</label> &nbsp;
                            <label for="">03/02/2020</label> &nbsp;
                            <label for="Empty_Standard_Garden_Waste">Empty Standard Garden Waste</label>
                        </td>
                    </tr>
                    <tr class="spacer-row"><td></td></tr>
                    <tr class="data-row recyclable-bin-type" data-toggle="tooltip" title="Waste-11 Organic-060120">
                        <td class="graphic-cell"></td>
                        <td class="visible-cell">
                            <label for="Monday">Monday</label> &nbsp;
                            <label for="">03/02/2020</label> &nbsp;
                            <label for="Empty_Standard_Mixed_Recycling">Empty Standard Mixed Recycling</label>
                        </td>
                    </tr>
                    <tr class="spacer-row"><td></td></tr>
                    <tr class="data-row non-recyclable-bin-type" data-toggle="tooltip" title="Waste-15-060120">
                        <td class="graphic-cell"></td>
                        <td class="visible-cell">
                            <label for="Monday">Monday</label> &nbsp;
                            <label for="">10/02/2020</label> &nbsp;
                            <label for="Empty_Standard_General_Waste">Empty Standard General Waste</label>
                        </td>
                    </tr>
                    <tr class="spacer-row"><td></td></tr>
                    <tr class="data-row green-waste-bin-type" data-toggle="tooltip" title="CADDY DELIVERY-Caddy Delivery 145-100120">
                        <td class="graphic-cell"></td>
                        <td class="visible-cell">
                            <label for="Monday">Monday</label> &nbsp;
                            <label for="">17/02/2020</label> &nbsp;
                            <label for="Empty_Standard_Garden_Waste">Empty Standard Garden Waste</label>
                        </td>
                    </tr>
                    <tr class="spacer-row"><td></td></tr>
                    <tr class="data-row recyclable-bin-type" data-toggle="tooltip" title="Waste-15-130120">
                        <td class="graphic-cell"></td>
                        <td class="visible-cell">
                            <label for="Monday">Monday</label> &nbsp;
                            <label for="">17/02/2020</label> &nbsp;
                            <label for="Empty_Standard_Mixed_Recycling">Empty Standard Mixed Recycling</label>
                        </td>
                    </tr>
                    <tr class="spacer-row"><td></td></tr>

            </table>

What I'm trying to do is extract each td with a call of visible-cell into an object like so:

{['Friday','10/01/2020','Delivery Caddy'],['Monday','13/01/2020','Empty Standard General Waste']}

So far I've got everything into an array, but I cant figure out how to separate it as above

    $('.visible-cell label').each(function() {
        const label = $(this).text();
        labels.push(label)
    });

I think you shoud watch: [Get the contents of table row jquery](https://stackoverflow.com/questions/14460421/get-the-contents-of-a-table-row-with-a-button-click) — Daniel Bistuer, Jan 08 '20 at 13:58

rafaelcastrocouto · Accepted Answer · 2020-01-08T14:10:20.303

You want to put it all in an array since objects have keys for each value.

Here's a simple way to achieve it, removing empty sub arrays.

const labels = [];
const keys = ['day', 'date', 'type'];

$('.visible-cell').each(function() {
  const label = {};
  $('label', this).each(function (i) {
    label[keys[i]] = $(this).text();
  });
  if (!$.isEmptyObject(label)) labels.push(label);
});

console.log(labels);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="job-details">
  <tr class="spacer-row">
    <td class="graphic-cell"></td>
    <td class="visible-cell"></td>
  </tr>
  <tr class="data-row unknown-bin-type" data-toggle="tooltip" title="Waste-15-021219">
    <td class="graphic-cell"></td>
    <td class="visible-cell reschedule-cell">
      <label for="Friday">Friday</label> &nbsp;
      <label for="">10/01/2020</label> &nbsp;
      <label for="Deliver_CADDY">Deliver CADDY</label>
    </td>
  </tr>
  <tr class="spacer-row">
    <td></td>
  </tr>
  <tr class="data-row non-recyclable-bin-type" data-toggle="tooltip" title="Waste-15-091219">
    <td class="graphic-cell"></td>
    <td class="visible-cell">
      <label for="Monday">Monday</label> &nbsp;
      <label for="">13/01/2020</label> &nbsp;
      <label for="Empty_Standard_General_Waste">Empty Standard General Waste</label>
    </td>
  </tr>
  <tr class="spacer-row">
    <td></td>
  </tr>
  <tr class="data-row recyclable-bin-type" data-toggle="tooltip" title="Waste-11 Organic-091219">
    <td class="graphic-cell"></td>
    <td class="visible-cell">
      <label for="Monday">Monday</label> &nbsp;
      <label for="">20/01/2020</label> &nbsp;
      <label for="Empty_Standard_Mixed_Recycling">Empty Standard Mixed Recycling</label>
    </td>
  </tr>
  <tr class="spacer-row">
    <td></td>
  </tr>
  <tr class="data-row green-waste-bin-type" data-toggle="tooltip" title="Waste-15-161219">
    <td class="graphic-cell"></td>
    <td class="visible-cell">
      <label for="Monday">Monday</label> &nbsp;
      <label for="">20/01/2020</label> &nbsp;
      <label for="Empty_Standard_Garden_Waste">Empty Standard Garden Waste</label>
    </td>
  </tr>
  <tr class="spacer-row">
    <td></td>
  </tr>
  <tr class="data-row non-recyclable-bin-type" data-toggle="tooltip" title="Waste-15-231219">
    <td class="graphic-cell"></td>
    <td class="visible-cell">
      <label for="Monday">Monday</label> &nbsp;
      <label for="">27/01/2020</label> &nbsp;
      <label for="Empty_Standard_General_Waste">Empty Standard General Waste</label>
    </td>
  </tr>
  <tr class="spacer-row">
    <td></td>
  </tr>
  <tr class="data-row green-waste-bin-type" data-toggle="tooltip" title="Waste-15-301219">
    <td class="graphic-cell"></td>
    <td class="visible-cell">
      <label for="Monday">Monday</label> &nbsp;
      <label for="">03/02/2020</label> &nbsp;
      <label for="Empty_Standard_Garden_Waste">Empty Standard Garden Waste</label>
    </td>
  </tr>
  <tr class="spacer-row">
    <td></td>
  </tr>
  <tr class="data-row recyclable-bin-type" data-toggle="tooltip" title="Waste-11 Organic-060120">
    <td class="graphic-cell"></td>
    <td class="visible-cell">
      <label for="Monday">Monday</label> &nbsp;
      <label for="">03/02/2020</label> &nbsp;
      <label for="Empty_Standard_Mixed_Recycling">Empty Standard Mixed Recycling</label>
    </td>
  </tr>
  <tr class="spacer-row">
    <td></td>
  </tr>
  <tr class="data-row non-recyclable-bin-type" data-toggle="tooltip" title="Waste-15-060120">
    <td class="graphic-cell"></td>
    <td class="visible-cell">
      <label for="Monday">Monday</label> &nbsp;
      <label for="">10/02/2020</label> &nbsp;
      <label for="Empty_Standard_General_Waste">Empty Standard General Waste</label>
    </td>
  </tr>
  <tr class="spacer-row">
    <td></td>
  </tr>
  <tr class="data-row green-waste-bin-type" data-toggle="tooltip" title="CADDY DELIVERY-Caddy Delivery 145-100120">
    <td class="graphic-cell"></td>
    <td class="visible-cell">
      <label for="Monday">Monday</label> &nbsp;
      <label for="">17/02/2020</label> &nbsp;
      <label for="Empty_Standard_Garden_Waste">Empty Standard Garden Waste</label>
    </td>
  </tr>
  <tr class="spacer-row">
    <td></td>
  </tr>
  <tr class="data-row recyclable-bin-type" data-toggle="tooltip" title="Waste-15-130120">
    <td class="graphic-cell"></td>
    <td class="visible-cell">
      <label for="Monday">Monday</label> &nbsp;
      <label for="">17/02/2020</label> &nbsp;
      <label for="Empty_Standard_Mixed_Recycling">Empty Standard Mixed Recycling</label>
    </td>
  </tr>
  <tr class="spacer-row">
    <td></td>
  </tr>
</table>

Ah perfect. I've just realised I've got it a bit backwards too as I should have been an array of objects `[{'day': 'Monday', 'date':'10/01/2020', 'type': 'Empty....'}]`. Not to worry though, you've given me the starting point. Thanks :) — K20GH, Jan 08 '20 at 13:37
Ah thanks. Thats a much nicer way than I did it with a switch statement! — K20GH, Jan 08 '20 at 14:12

TD Labels into object with Jquery?

1 Answers1