javascript - How to serialize table row to json object

Question

How to serialize table to json array so that every array element contains json object representing one table row:

[
{ name: "variable1", valuetostore: "a-b", totaltype: "Lowest" },
{ name: "variable2", valuetostore: "c-d", totaltype: "Highest" }
]

I tried code below but this produces objects with name and value properties and there are more members in array than in table rows.

It serializes also first row which is hidden. It is template row for row adding and should not apper in result.

$(function() {
  $("#btnShow").on("click", function() {
    console.log($("#myForm").serializeArray());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form id="myForm">
          <table class="table table-condensed table-striped" id="reportVariablesTable">
            <thead>
              <tr>
                <th>Name</th>
                <th>Value</th>
                <th>Calculate</th>
              </tr>
            </thead>
            <tbody>
              <!-- table contains one hidden rows which should not -->
              <tr style='display:none'>
                <td>
                  <input type="text" name="name">
                </td>

                <td>
                  <textarea name="valuetostore"></textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest">Smallest</option>
                    <option value="Highest">Biggers</option>
                  </select>
                </td>
              </tr>

              <!-- other are data rows which should sent -->
              <tr>
                <td>
                  <input type="text" name="name" value="variable1">
                </td>

                <td>
                  <textarea name="valuetostore">a-b</textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest" selected>Smallest</option>
                    <option value="Highest">Biggers</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  <input type="text" name="name" value="variable2">
                </td>

                <td>
                  <textarea name="valuetostore">c-d</textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest" >Smallest</option>
                    <option value="Highest" selected>Biggers</option>
                  </select>
                </td>
              </tr>

            </tbody>
          </table>
          <button id="btnShow" type="button">
            Show
          </button>
        </form>

      </div>
    </div>
  </div>
</div>

Answer 1

You can use the nth-child selector with n+2 to select only the tr>=2:

#myForm tbody tr:nth-child(n+2)

However the result will not be an array of objects where each object is an object of a row. The result will be an array of object where each select/input/textarea is an object by itself.

You can use each() function on the trs to go over all of them to get the expected result.

Here is an example for both options:

$(function() {
  $("#btnShow1").on("click", function() {
    console.log($("#myForm tbody tr:nth-child(n+2) textarea,#myForm tbody tr:nth-child(n+2) input,#myForm tbody tr:nth-child(n+2) select").serializeArray());
  });

  $("#btnShow2").on("click", function() {
    var ar = [];
    $("#myForm tbody tr:nth-child(n+2)").each(function() {
      rowData = $(this).find('input, select, textarea').serializeArray();
      var rowAr = {};
      $.each(rowData, function(e, v) {
        rowAr[v['name']] = v['value'];
      });
      ar.push(rowAr);
    });
    console.log(ar)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form id="myForm">
          <table class="table table-condensed table-striped" id="reportVariablesTable">
            <thead>
              <tr>
                <th>Name</th>
                <th>Value</th>
                <th>Calculate</th>
              </tr>
            </thead>
            <tbody>
              <!-- table contains one hidden rows which should not -->
              <tr style='display:none'>
                <td>
                  <input type="text" name="name">
                </td>

                <td>
                  <textarea name="valuetostore"></textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest">Smallest</option>
                    <option value="Highest">Biggers</option>
                  </select>
                </td>
              </tr>

              <!-- other are data rows which should sent -->
              <tr>
                <td>
                  <input type="text" name="name" value="variable1">
                </td>

                <td>
                  <textarea name="valuetostore">a-b</textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest" selected>Smallest</option>
                    <option value="Highest">Biggers</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  <input type="text" name="name" value="variable2">
                </td>

                <td>
                  <textarea name="valuetostore">c-d</textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest" >Smallest</option>
                    <option value="Highest" selected>Biggers</option>
                  </select>
                </td>
              </tr>

            </tbody>
          </table>
          <button id="btnShow1" type="button">
            Options #1
          </button><br />
          <button id="btnShow2" type="button">
            Options #2
          </button>
        </form>

      </div>
    </div>
  </div>
</div>