Jquery Push Table row values to Json Object

Question

I am trying to loop each row in a html table and add each row info to json object with corresponding row name. Row details will have data for each column. I am trying to get json like the below

var TemplateData = {
   rowName : '',
   rowDetails: [
      {columnHeader: columnValue,....}
   ]
}

I tried the below. What I am missing?

My fiddle is here

<table border=1 id="battery">
  <tr>
    <th>RowName</th>
    <th>ColName1</th>
    <th>ColName2</th>
  </tr>
  <tr>
    <td id='name'>
      My Name 1
    </td>
    <td id='col1'>test row 1 col 1</td>
    <td id='col2'>test row 1 col 2</td>
  </tr>
  <tr>
    <td id='name'>
      My Name 2
    </td>
    <td id='col1'>test row 2 col 1</td>
    <td id='col2'>test row 2 col 2</td>
  </tr>
</table>

  $(document).ready(function() {
    var TemplateData = {
      templateName: 'Template 123',
      tableInfo: [{
        Name: '',
        rowDetails: [

        ]
      }]
    }

    $('#battery tr').each(function(i, row) {
      var rowsName = $(this).find('#name').text();
      var col1 = $(this).find('#col1').text();
      var col2 = $(this).find('#col2').text();

      TemplateData.tableInfo[0].rowDetails.push({
        rowName: "name",
        value: rowsName
      })

      TemplateData.tableInfo[0].rowDetails.push({
        rowName: "col1",
        value: col1
      })

      TemplateData.tableInfo[0].rowDetails.push({
        rowName: "col2",
        value: col2
      })
    });

    console.log(TemplateData);
  });

Here 2 rows columns info are coming under same row details. I am trying to separate them in to 2 rowDetails arrays.

Answer 1

Its been a bit since i have done Jquery, but seemed like it would be fun. Give this a try and see if its what you are looking for. I may suggest adding thead and tbody to your mark up. Might make it easier to traverse and parse.

$(() => {
  const ROW_NAME_KEY = 'name';

  const TemplateData = {
    templateName: 'Template 123',
    tableInfo: []
  };

  const formatMe = ($el) => $el.text().trim();

  const $rows = $('#battery').find('tr'),
    headers = $rows.splice(0, 1); // header rows

  // iterate rows to get the table info
  $rows.each((i, row) => {
    const $cols = $(row).find('td');
    let tpl = {
      Name: '',
      rowDetails: []
    };

    // within each row, lets get the name and the details
    $cols.each((i, col) => {
      const $col = $(col);

      if ($col.prop('id') == ROW_NAME_KEY) {
        tpl['Name'] = formatMe($col);
        return;
      }

      tpl['rowDetails'].push(formatMe($col));
    });

    TemplateData['tableInfo'].push(tpl);
  });

  console.log(TemplateData);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1 id='battery'>
  <tr>
    <th>RowName</th>
    <th>ColName1</th>
    <th>ColName2</th>
  </tr>
  <tr>
    <td id='name'>
      My Name 1
    </td>
    <td id='col1'>test row 1 col 1</td>
    <td id='col2'>test row 1 col 2</td>
  </tr>
  <tr>
    <td id='name'>
      My Name 2
    </td>
    <td id='col1'>test row 2 col 1</td>
    <td id='col2'>test row 2 col 2</td>
  </tr>
</table>