How to read a list of html tables in JavaScript

Question

I have a list of HTML tables given by pandas data frame in the format of:

list_html = 
[<table border="1" class="dataframe">
 <thead>
<tr style="text-align: right;">
  <th></th>
  <th>score</th>
  <th>id</th>
  <th>name</th>
</tr>
  </thead>
 <tbody>
<tr>
   <th>0</th>
  <td>0.776959</td>
  <td>grade</td>
  <td>grade</td>
</tr>
<tr>
  <th>1</th>
  <td>0.414527</td>
  <td>class</td>
  <td>class</td>
</tr>, ... , ... ]

I am trying to visualize this data in an html page and could not do it. I do not have enough experience in web development. My goal is to use JavaScript to loop through each item the list and visualize them below each other in html. It would be great if anybody can help!

This is what I tried so far, its probably completely wrong:

var list_html = list_html  // list of html codes as a      javascript variable.
var arrayLength = analysis.length;
for (var i in list_html) {
  document.getElementById("analysis_1").innerHTML = list_html[i];
}

What is list_analysis, analysis and tone_analysis ?? I don't see any relationship between these objects — Pugazh
– Pugazh, Commented Aug 18, 2016 at 7:54
Sorry about that, forgot to edit right that part. just put it in the correct format @Pugazh — AlpU
– AlpU, Commented Aug 18, 2016 at 7:56

daveoncode · Accepted Answer · 2016-08-18 09:38:01Z

3

Given a valid array of strings list_html (actually list_html is not a valid array of strings, since the markup in each entry is not wrapped in quotes) and a container in the DOM with id "analysis_1" it's simply a matter of:

var container = document.getElementById('analysis_1');
for (var i = 0; i < list_html.length; i++) {
    container.innerHTML += list_html[i];
}

UPDATE:

well... in your scenario there is no need at all for a loop, you can simply inject a single string by joining the elements in the array:

document.getElementById('analysis_1').innerHTML = list_html.join('');

fast and simple! :)

edited Aug 18, 2016 at 9:38

answered Aug 18, 2016 at 7:58

daveoncode

19.8k19 gold badges108 silver badges163 bronze badges

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

5 Comments

Tibrogargan Over a year ago

I might be tempted to wrap each table in a div ... something like ... var div = document.createElement("div"); div.id = "table_"+i; container.appendChild(div); div.innerHTML = list_html[i];

daveoncode Over a year ago

it's unnecessary and moreover slower than just inject a string into the DOM... elements creation and manipulation are very expensive! Instead if you want to wrap with a div you could do this: container.innerHTML += '<div>' + list_html[i] + '</div>';

Tibrogargan Over a year ago

Could you point me to some documentation that discusses this expense difference please? A quick experiment in Chrome shows little difference in timing. Injecting HTML is perhaps 5% faster over 50,000 iterations.

daveoncode Over a year ago

Well... my sentence is based on years of experience (when chrome did not exists, IE was a nightmare and no js framework were available), but maybe nowadays is not that important :P

Tibrogargan Over a year ago

There is still a difference in timing, even if it's small, but it seems counter intuitive. I would have thought string injection would be more expensive since it needs to create elements plus parse a string. Very intriguing

Aspirin2D · Accepted Answer · 2016-08-18 08:26:32Z

-1

using jquery's selectors :

Give the 'td' which contains the data a class name, eg: 'MyTd';
Select them all: $(.MyTd).text()
Done!

answered Aug 18, 2016 at 8:26

Aspirin2D

363 bronze badges

1 Comment

Tibrogargan Over a year ago

This answer does not seem to go with this question

Collectives™ on Stack Overflow

How to read a list of html tables in JavaScript

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related