Javascript to combine HTML from 3 files to create table

Question

I have output from 2 different apps + a csv file that I would like to combine into an HTML table. I would just like to know if javascript is the right tool for this & just some hints on where to start.

I have an HTML table that is output by one of the apps. The 1st column contains kit#s.

<TABLE border=1 cellpadding=0 cellspacing=0>
<TR align=center><TD colspan=103 CLASS=clsTblTitle>DNA Configuration - DNA Results Comparison</TD></TR>
<TR align=center valign=top CLASS=clsVert><TD valign=middle>ID</TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>3<BR></TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>0<BR></TD></TR>
<TR align=center CLASS=clsRef><TD align=left>modal</TD><TD TITLE='DYS393modal' CLASS=clsRef>13</TD><TD TITLE='DYS390modal' CLASS=clsRef>25</TD></TR>
<TR align=center CLASS=clsCellData><TD align=left>76070</TD><TD TITLE='DYS39376070' CLASS=clsCellData>13</TD><TD TITLE='DYS39076070' CLASS=clsCellData>25</TD></TR>
<TR align=center CLASS=clsCellData><TD align=left>47403</TD><TD TITLE='DYS39347403' CLASS=clsCellData>13</TD><TD BGCOLOR=#CCFFCC TITLE='DYS39047403' CLASS=clsCellData>26</TD></TR>
<TR align=center CLASS=clsCellData><TD align=left>212188</TD><TD TITLE='DYS393212188' CLASS=clsCellData>13</TD><TD TITLE='DYS390212188' CLASS=clsCellData>25</TD></TR>
</TABLE>

Another app spits out a chart that includes these kits, but also additional rows that I want to add to the chart above:

<pre>
1-Group MRCA b. 450AD-950AD
...2-Node #113 Z288 b. 1350AD-1850AD
......3-Participant 76070
...2-Node #85 b. 1850AD-1900AD    
......3-Participant 47403
......3-Participant 212188
</pre>

Then I have a csv file that contains additional info about each kit that I would like to add as columns.

Kit,Name,Ancestor,Haplogroup
76070,Jones,"John Jones (1763-1843)",R-M417
47403,Smith,"John Smith, 1696-1760",R-M512
212188,Baker,,R-M198

The final product would look like this:

<TABLE border=1 cellpadding=0 cellspacing=0>
<TR align=center><TD colspan=6 CLASS=clsTblTitle>DNA Configuration - DNA Results Comparison</TD></TR>
<TR align=center valign=top CLASS=clsVert><TD valign=middle>ID</TD><TD valign=middle>Name</TD><TD valign=middle>Ancestor</TD><TD valign=middle>Haplogroup</TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>3<BR></TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>0<BR></TD></TR>
<TR align=center CLASS=clsRef><TD align=left>modal</TD><TD></TD><TD></TD><TD></TD><TD TITLE='DYS393modal' CLASS=clsRef>13</TD><TD TITLE='DYS390modal' CLASS=clsRef>25</TD></TR>
<TR><TD colspan=6>1-Group MRCA b. 450AD-950AD</TR></TD>
<TR><TD colspan=6>...2-Node #113 Z288 b. 1350AD-1850AD</TR></TD>
<TR align=center CLASS=clsCellData><TD align=left>76070</TD><TD>Jones</TD><TD>John Jones (1763-1843)</TD><TD>R-M417</TD><TD TITLE='DYS39376070' CLASS=clsCellData>13</TD><TD TITLE='DYS39076070' CLASS=clsCellData>25</TD></TR>
<TR><TD colspan=6>...2-Node #85 b. 1850AD-1900AD</TR></TD>
<TR align=center CLASS=clsCellData><TD align=left>47403</TD><TD>Smith</TD><TD>John Smith, 1696-1760</TD><TD>R-M512</TD><TD TITLE='DYS39347403' CLASS=clsCellData>13</TD><TD BGCOLOR=#CCFFCC TITLE='DYS39047403' CLASS=clsCellData>26</TD></TR>
<TR align=center CLASS=clsCellData><TD align=left>212188</TD><TD>Baker</TD><TD></TD><TD>R-M198</TD><TD TITLE='DYS393212188' CLASS=clsCellData>13</TD><TD TITLE='DYS390212188' CLASS=clsCellData>25</TD></TR>
</TABLE>

I have very basic javascript skills, but I feel like I should be able to start with the original HTML table created by the app and just insert the rows & columns.

If this is the best way to go, I feel like I can figure out how to do it.

Or maybe there is a better way to approach it?

It can be done with JS. We do expect you to try yourself. Start by merging into objects — mplungjan, Jun 23 '20 at 06:02
The best way is to first try yourself and when you face a difficulty - then do your research about the particular difficulty instead of the task as a whole. Then try with the next difficulty until you complete the task. Splitting a big task into smaller tasks is a fundamental skill and without it you won't go far away in software development. — IVO GELOV, Jun 23 '20 at 06:08
Reading CSV files may be awkward without some sort of server side code - be it Node.js or Java, or Python, or .NET code. If you represent the data in such files as JSON you will find it easier to integrate into a web page via JavaScript. Take a look at these links: https://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild. You can select a file.. But it involves the user selecting one via a button. — JGFMK, Jun 23 '20 at 06:24
Yes. Thank you everyone. I should’ve mentioned, I’ve been at it for several days without much luck, which is why I asked. As long as I’m thinking about it the right way, I’ll just keep trying. And I’ll definitely look at JSON. — redheadkelly, Jun 23 '20 at 06:46

mplungjan · Answer 1 · 2020-06-24T06:54:28.243

Here is some 95% of what you wanted.

// https://stackoverflow.com/a/14991797/295783
function parseCSV(str) {let arr = [];let quote = false; for (let row = col = c = 0; c < str.length; c++) { let cc = str[c], nc = str[c+1]; arr[row] = arr[row] || []; arr[row][col] = arr[row][col] || ''; if (cc == '"' && quote && nc == '"') { arr[row][col] += cc; ++c; continue; } if (cc == '"') { quote = !quote; continue; } if (cc == ',' && !quote) { ++col; continue; } if (cc == '\n' && !quote) { ++row; col = 0; continue; }arr[row][col] += cc;}return arr;}


const group = `1-Group MRCA b. 450AD-950AD
...2-Node #113 Z288 b. 1350AD-1850AD
......3-Participant 76070
...2-Node #85 b. 1850AD-1900AD    
......3-Participant 47403
......3-Participant 212188`.split(/\r?\n/);

const kit = `Kit,Name,Ancestor,Haplogroup
76070,Jones,"John Jones (1763-1843)",R-M417
47403,Smith,"John Smith, 1696-1760",R-M512
212188,Baker,,R-M198`.split(/\r?\n/);

const table = document.querySelector("table").cloneNode(true);
const thead = document.createElement("thead");
const tbody = table.querySelector("tbody");

const kitObj = kit.slice(1).reduce((acc,line) => {
   const [ID,Name,Ancestor,Haplogroup] = parseCSV(line).flat() // cannot split on just commas
   acc[ID] = {Name,Ancestor,Haplogroup}
   return acc;
},{})
// console.log(kitObj)

const dys = [...tbody.querySelectorAll("tr.clsCellData")].reduce((acc,row) => {
  acc[row.cells[0].textContent] = [...row.cells].slice(1).map(cell => `<td ${cell.getAttributeNames().map(attr => `${attr}="${cell.getAttribute(attr)}"`)}>${cell.textContent}</td>`);
  return acc;
},{});

// console.log(dys)

const rows = group.map(line => {
  if (line.includes("Participant")) {
    const [,participant] = line.split(" ");
    const obj = kitObj[participant];
    return `<tr class="clsCellData"><td>${participant}</td><td>${obj.Name}</td><td>${obj.Ancestor}</td><td>${obj.Haplogroup}</td>${dys[participant].join("")}</tr>`
  }
  else return `<tr><td colspan="6">${line.trim()}</td></tr>`
})
//console.log(rows)

const firstRow = tbody.querySelector("tr");
thead.innerHTML = `<tr><th colspan="6">${firstRow.cells[0].textContent}</th></tr>`
table.insertBefore(thead,tbody);
firstRow.parentNode.removeChild(firstRow);
const secondRow = tbody.querySelector("tr"); // after we deleted the first
const throw2 = document.createElement("tr");
throw2.innerHTML = `<tr><th>${secondRow.cells[0].textContent}</th><th>Name</th><th>Ancestor</th><th>Haplogroup</th><th>${secondRow.cells[1].innerHTML}</th><th>${secondRow.cells[2].innerHTML}</th></tr>`
thead.appendChild(throw2)
secondRow.parentNode.removeChild(secondRow);
const thirdRow =  tbody.querySelector("tr"); // after we deleted the first
thirdRow.cells[0].setAttribute("colspan",4);
tbody.innerHTML=tbody.firstElementChild.outerHTML+rows.join("");
document.body.appendChild(table)

<h3>Generated table</h3>
<TABLE border=1 cellpadding=0 cellspacing=0>
<TR align=center><TD colspan=103 CLASS=clsTblTitle>DNA Configuration - DNA Results Comparison</TD></TR>
<TR align=center valign=top CLASS=clsVert><TD valign=middle>ID</TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>3<BR></TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>0<BR></TD></TR>
<TR align=center CLASS=clsRef><TD align=left>modal</TD><TD TITLE='DYS393modal' CLASS=clsRef>13</TD><TD TITLE='DYS390modal' CLASS=clsRef>25</TD></TR>
<TR align=center CLASS=clsCellData><TD align=left>76070</TD><TD TITLE='DYS39376070' CLASS=clsCellData>13</TD><TD TITLE='DYS39076070' CLASS=clsCellData>25</TD></TR>
<TR align=center CLASS=clsCellData><TD align=left>47403</TD><TD TITLE='DYS39347403' CLASS=clsCellData>13</TD><TD BGCOLOR=#CCFFCC TITLE='DYS39047403' CLASS=clsCellData>26</TD></TR>
<TR align=center CLASS=clsCellData><TD align=left>212188</TD><TD TITLE='DYS393212188' CLASS=clsCellData>13</TD><TD TITLE='DYS390212188' CLASS=clsCellData>25</TD></TR>
</TABLE>
<hr/>
<h3>Expected</h3>

<TABLE border=1 cellpadding=0 cellspacing=0>
<TR align=center><TD colspan=6 CLASS=clsTblTitle>DNA Configuration - DNA Results Comparison</TD></TR>
<TR align=center valign=top CLASS=clsVert><TD valign=middle>ID</TD><TD valign=middle>Name</TD><TD valign=middle>Ancestor</TD><TD valign=middle>Haplogroup</TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>3<BR></TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>0<BR></TD></TR>
<TR align=center CLASS=clsRef><TD align=left>modal</TD><TD></TD><TD></TD><TD></TD><TD TITLE='DYS393modal' CLASS=clsRef>13</TD><TD TITLE='DYS390modal' CLASS=clsRef>25</TD></TR>
<TR><TD colspan=6>1-Group MRCA b. 450AD-950AD</TR></TD>
<TR><TD colspan=6>...2-Node #113 Z288 b. 1350AD-1850AD</TR></TD>
<TR align=center CLASS=clsCellData><TD align=left>76070</TD><TD>Jones</TD><TD>John Jones (1763-1843)</TD><TD>R-M417</TD><TD TITLE='DYS39376070' CLASS=clsCellData>13</TD><TD TITLE='DYS39076070' CLASS=clsCellData>25</TD></TR>
<TR><TD colspan=6>...2-Node #85 b. 1850AD-1900AD</TR></TD>
<TR align=center CLASS=clsCellData><TD align=left>47403</TD><TD>Smith</TD><TD>John Smith, 1696-1760</TD><TD>R-M512</TD><TD TITLE='DYS39347403' CLASS=clsCellData>13</TD><TD BGCOLOR=#CCFFCC TITLE='DYS39047403' CLASS=clsCellData>26</TD></TR>
<TR align=center CLASS=clsCellData><TD align=left>212188</TD><TD>Baker</TD><TD></TD><TD>R-M198</TD><TD TITLE='DYS393212188' CLASS=clsCellData>13</TD><TD TITLE='DYS390212188' CLASS=clsCellData>25</TD></TR>
</TABLE>
<hr/>

<h3>Modified by script</h3>

Great. Thanks for the reference. I’ll see where it takes me — redheadkelly, Jun 23 '20 at 06:57
Ok, done. You need to copy across some of the attributes and make a stylesheet instead of inline styles — mplungjan, Jun 23 '20 at 07:30
Amazing. Thank you so much. Gonna have to work on it tomorrow. — redheadkelly, Jun 23 '20 at 08:10
I got it working. Thank you so much. Can you tell me the best way to update my question or add an answer or whatever I need to do now? — redheadkelly, Jun 24 '20 at 06:40
I’m applying it now to a much larger chart & I do need the inline styles on the 100+ columns to the right. That HTML is all created by an app that analyzes the data & spits out the HTML. Is there a way to preserve the HTML? Just looking for a yes or no & then I’ll try to figure it out from there. Thanks again. — redheadkelly, Jun 24 '20 at 06:49
Sure, we can clone the table and modify that. See update. The bottom is mine — mplungjan, Jun 24 '20 at 06:54
Or do you mean something else? I applied the cell attributes on the right already - as you can see the 26 is green in my table too — mplungjan, Jun 24 '20 at 06:55

Javascript to combine HTML from 3 files to create table

1 Answers1