How to convert HTML table into jQuery key-value pair array?

Question

I have some HTML table (without tbody tag) where I want to convert the HTML data into key-value pair(header-data) in jQuery array.

When you run code snippet, the output I get is only for last row.

************Actual Output************
[
  "Company:Swiggy",
  "Contact:Gotya",
  "Country:Japan"
]

************Needed Output************
[
  "Company:Creamy Cola",
  "Contact:Atharva",
  "Country:Switzerland"
],
[
  "Company:Tuty Fruity",
  "Contact:Suyog",
  "Country:UK"
],
[
  "Company:Milky Way",
  "Contact:Santosh",
  "Country:US"
],
[
  "Company:Swiggy",
  "Contact:Gotya",
  "Country:Japan"
]

I checked below references too, but couldn't find logic.
Convert HTML Rows into Name Value Pair in JQuery
get values from table as key value pairs with jquery

Thanks in advance for your help.
This is what I have tried so far, please run snippet to get answer in console.

/******JQUERY SCRIPT******/

/*Get Header*/
var xKey = [];
$("#xxx th").each(function() {
  var tempColName = $(this).text(); {
    xKey.push(tempColName);
  }
});
//console.log("Key");
//console.log(xKey);


/*Get Data*/
var xValue = [];
$("#xxx tr").each(function() {
  var arrayOfThisRow = [];
  var tableData = $(this).find('td');
  if (tableData.length > 0) {
    tableData.each(function() {
      arrayOfThisRow.push($(this).text());
    });
    xValue.push(arrayOfThisRow);
  }
});
//console.log("Value");
//console.log(xValue);

//My logic below

var xFinalArr = [];
for (var i = 0; i < xKey.length; i++) {
  var su = "";
  for (var j = 0; j < xValue.length; j++) {
    su = xKey[i] + ":" + xValue[j][i];
  }
  xFinalArr.push(su);
}
console.log("Output");
console.log(xFinalArr);

/******CSS STYLE******/

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<!--HTML-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>

  <table id="xxx">
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Creamy Cola</td>
      <td>Atharva</td>
      <td>Switzerland</td>
    </tr>
    <tr>
      <td>Tuty Fruity</td>
      <td>Suyog</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Milky Way</td>
      <td>Santosh</td>
      <td>US</td>
    </tr>
    <tr>
      <td>Swiggy</td>
      <td>Gotya</td>
      <td>Japan</td>
    </tr>
  </table>

</body>

</html>

swiftMessenger · Accepted Answer · 2020-06-24 12:42:03Z

1

It looks like what you are asking for is a 2-D array of results, though you are only currently storing results in a single-dimensional array. Perhaps you should try something like this:

var xFinalArr = [];
for (var i = 0; i < xValue.length; i++) {
  var xRowArr = [];
  for (var j = 0; j < xKey.length; j++) {
    xRowArr.push(xKey[j] + ":" + xValue[i][j]);
  }
  xFinalArr.push(xRowArr);
}

I suspect, however, that what you actually want is an array of objects, which is only slightly different code:

var xFinalArr = [];
for (var i = 0; i < xValue.length; i++) {
  var xRowObj = {};
  for (var j = 0; j < xKey.length; j++) {
    xRowObj[xKey[j]] = xValue[i][j];
  }
  xFinalArr.push(xRowObj);
}

This is, of course, predicated on the assumption that no cells span multiple rows or columns, that each row has an identical number of columns, and that the header values translate into reasonable property names (though technically the code will still work if they do not).

edited Jun 24, 2020 at 12:42

answered Jun 22, 2020 at 15:48

swiftMessenger

665 bronze badges

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

2 Comments

foodiepanda Over a year ago

Perfect !!!. Also, thanks for suggesting array of objects which would be easy in retrieving the data for post processing.

foodiepanda Over a year ago

Also, just correction from var xRowObj = {}}; to var xRowObj = {}; You have an additional '}'.

Collectives™ on Stack Overflow

How to convert HTML table into jQuery key-value pair array?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related