How to create an object gathering data from a table?-CodePudding

Lets say we have a table like the one in the example below and i want to do those things in order :

Create a parent object
Assign the text of the header as the first key/value
Create an array as the second key/value
Create an object for every td in tbody with 4 key/values inside containing their values like this :

{
  age: "33",
  car: "Toyota",
  job: "Plummer",
  name: "Mark"
}

Push all the objects I created in the previous step in the array.

So the final parent object will become this (based on the example) :

{
  head: "Whatever",
  cells: [{
    name: "Mark",
    job: "Plummer",
    age: "33",
    car: "Toyota"
  }, {
    name: "John",
    job: "Electrician",
    age: "26",
    car: "Fiat"
  }, {
    name: "Jane",
    job: "Police Officer",
    age: "45",
    car: "Tesla"
  }, {
    name: "Chris",
    job: "Engineer",
    age: "31",
    car: "Mercedes"
  }]
}

I got as far as creating the parent object and the 2 keys inside, but I don't even know where to start for creating an object for every tr. Any ideas on what the steps I have to follow next?

My progress so far :

var parentObject = {};
parentObject.head = $("#mp").text()
parentObject.cells = []

console.log(parentObject)

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th colspan="4" id="mp">Whatever</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mark</td>
      <td>Plummer</td>
      <td>33</td>
      <td>Toyota</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Electrician</td>
      <td>26</td>
      <td>Fiat</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Police Officer</td>
      <td>45</td>
      <td>Tesla</td>
    </tr>
    <tr>
      <td>Chris</td>
      <td>Engineer</td>
      <td>31</td>
      <td>Mercedes</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

To do what you require you can use map() to build an array of objects from the cells within the tbody, something like this:

const $table = $('table');

let serialisedTable = {
  name: $table.find('thead th').text(),
  cells: $table.find('tbody tr').map((i, row) => ({
    name: row.cells[0].innerText.trim(),
    job: row.cells[1].innerText.trim(),
    age: row.cells[2].innerText.trim(),
    car: row.cells[3].innerText.trim()
  })).get()
}

console.log(serialisedTable);

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th colspan="4" id="mp">Whatever</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mark</td>
      <td>Plummer</td>
      <td>33</td>
      <td>Toyota</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Electrician</td>
      <td>26</td>
      <td>Fiat</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Police Officer</td>
      <td>45</td>
      <td>Tesla</td>
    </tr>
    <tr>
      <td>Chris</td>
      <td>Engineer</td>
      <td>31</td>
      <td>Mercedes</td>
    </tr>
  </tbody>
</table>

Note that this can be made more dynamic by placing the 'cell' object's keys in the HTML of each row, if necessary.