Converting HTML table to JS object

Question

I have a table that looks like this which I'm using JS to convert to a JS object:

|column-1|column-2|column-3|column-4|column-5|
|--------|--------|--------|--------|--------|
|My Name |  Date  |Message |John Doe|Phone #s|
                           |Jhn Doe2|Phone #s|
                           |Jhn Doe3|Phone #s|
                           |Jhn Doe4|Phone #s|
                           |Jhn Doe5|Phone #s|

This is my JS code:

var table = document.getElementById('table');
  var jsonArr = [];
  for(var i =0,row;row = table.rows[i];i++){
       var colmn = row.cells;

         var recipeints = [{
          "phone_number": colmn[4].innerHTML,
          "recipient_name": colmn[3].innerHTML
         }];
         var message = {
            "message_by": colmn[0].innerHTML,
            "message_date": new Date(),
            "message_recipients": recipeints,
            "message_text": colmn[2].innerHTML
        };
        console.log(message);
}

The issue I'm facing is that the console message outputs 5 different object arrays with the message data but I'd like only one object output with nested objects for columns 4 and 5.

This is an instance of the output:

{message_by: "My name", message_date: Mon Dec 18 2017 14:32:29, message_recipients: Array(1), message_text: "Message"}
{message_by: "", message_date: Mon Dec 18 2017 14:32:29, message_recipients: Array(1), message_text: ""}
{message_by: "", message_date: Mon Dec 18 2017 14:32:29, message_recipients: Array(1), message_text: ""}
{message_by: "", message_date: Mon Dec 18 2017 14:32:29, message_recipients: Array(1), message_text: ""}
{message_by: "", message_date: Mon Dec 18 2017 14:32:29, message_recipients: Array(1), message_text: ""}

And this is the output I'm aiming for:

{message_by: "My Name", message_date: Mon Dec 18 2017 14:32:29, message_recipients: Array(5), message_text: "test"}
message_by:"My Name"
message_date:Mon Dec 18 2017 14:32:29 {}
message_recipients:Array(5)
    0:{phone_number: "0700100100", recipient_name: "John Doe"}
    1:{phone_number: "0700100200", recipient_name: "John Doe 2"}
    2:{phone_number: "0700100300", recipient_name: "John Doe 3"}
    3:{phone_number: "0700100400", recipient_name: "John Doe 4"}
    4:{phone_number: "0700100500", recipient_name: "John Doe 5"}
message_text:"sample"

That is, I'd like output only one object and merge the columns 4 and 5 to avoid null fields in multiple objects. How can I achieve this?

More Info

The code of the dynamically generated table is as shown:

<table id='table'>
   <tr>
      <td align='left' width='200'>My Name</td>
      <td align='left' width='200'>2017-12-18 15:07:33</td>
      <td align='left' width='200'>Sample Text</td>
      <td align='left' width='200'>0700100100</td>
      <td align='left' width='200'>John Doe</td>
   </tr>
   <tr>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'>0700100200</td>
      <td align='left' width='200'>John Doe 2</td>
   </tr>
   <tr>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'>0700100300</td>
      <td align='left' width='200'>John Doe 3</td>
   </tr>
   <tr>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'>0700100400</td>
      <td align='left' width='200'>John Doe 4</td>
   </tr>
   <tr>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'></td>
      <td align='left' width='200'>0700100500</td>
      <td align='left' width='200'>John Doe 5</td>
   </tr>
</table>

Limit the for loop to columns 4 and 5? I honestly can't tell where the issue is. The answer is "rewrite your code to do what you want instead" — user5734311
– user5734311, Commented Dec 18, 2017 at 11:57
The different methods I've tried loop through the entire table including the null fields, that's why I'm here — Clint_A
– Clint_A, Commented Dec 18, 2017 at 12:00
I just edited the question. I've added an example HTML table. — Clint_A
– Clint_A, Commented Dec 18, 2017 at 12:29

user5734311 · Accepted Answer · 2017-12-18 12:33:39Z

2

I used mostly your own code but pulled the first row out of the loop.

var table = document.getElementById('table');

var colmn = table.rows[0].cells;

var message = {
  "message_by": colmn[0].innerHTML,
  "message_date": new Date(),
  "message_recipients": [],
  "message_text": colmn[2].innerHTML
};

for (var i = 0, row; row = table.rows[i]; i++) {
  colmn = row.cells;

  message.message_recipients.push({
    "phone_number": colmn[4].innerHTML,
    "recipient_name": colmn[3].innerHTML
  });
}
console.log(message);

td {
  text-align: left;
  width: 200px
}

<table id='table'>
  <tr>
    <td>My Name</td>
    <td>2017-12-18 15:07:33</td>
    <td>Sample Text</td>
    <td>0700100100</td>
    <td>John Doe</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>0700100200</td>
    <td>John Doe 2</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>0700100300</td>
    <td>John Doe 3</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>0700100400</td>
    <td>John Doe 4</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>0700100500</td>
    <td>John Doe 5</td>
  </tr>
</table>

answered Dec 18, 2017 at 12:33

user5734311

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

1 Comment

Clint_A Over a year ago

Thanks a tonne. You just saved my afternoon

KL_ · Accepted Answer · 2017-12-18 12:32:29Z

0

You can keep one object and work with it and some conditions, and only push it to the jsonArr when necessary.

var table = document.getElementById('table');
var jsonArr = [];
var object;
for(var i =0,row;row = table.rows[i];i++){
     var colmn = row.cells;

  if(colmn[0].innerHTML != ''){
    if(object !== undefined){
      jsonArr.push(object);
    }
    object = {
      message_by : colmn[0].innerHTML,
      message_date : new Date(),
      message_text : colmn[2].innerHTML,
      message_recipients : [],
    }
  }
        var recipient = {
    "phone_number": colmn[4].innerHTML,
    "recipient_name": colmn[3].innerHTML
   };
   object.message_recipients.push(recipient);
}
jsonArr.push(object);
console.log(jsonArr);

If your column-1, in the 2nd row, print "My name" too, you can use colmn[0].innerHTML != object.message_by to check if you need to push the object and start to build another.

edited Dec 18, 2017 at 12:32

answered Dec 18, 2017 at 12:17

KL_

1,5131 gold badge10 silver badges13 bronze badges

1 Comment

KL_ Over a year ago

Fixed, I'm sorry. Forgot about the last push. :(

Collectives™ on Stack Overflow

Converting HTML table to JS object

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related