-1

I am trying to build an electron app that fetches a csv table and displays it as a csv formatted html table

I tried using the code below but the styles are not being applied to the table in the electron window

It is not throwing any error just displaying the table without styles

const csv = `id,species,name
0,Panthera leo,Lion
1,Canis Lupus,Wolf
2,Capra hircus,Goat
3,Panthera pardus,Leopard
4,Equus zebra,Zebra`;

function fetchData() {
  return new Promise(res => setTimeout(() => res(csv), 1000));
}

getData();
async function getData() {
  //const response = await fetch('new.csv');
  //const data = await response.text();
  const data = await fetchData();
  let a;
  a = data.slice(15);
  a = a.replaceAll(',', '</td><td>');
  a = a.replaceAll('\n', '</tr><tr><td>');
  let start = "<table><tr><th>id</th><th>species</th><th>name</th><tr><td></tr>";
  let end = "</td></tr></table>";
  let semi = start.concat('', a);
  a = semi.concat('', end);
  a = a.replaceAll('<tr><td></tr></tr>', '');
  a = a.replaceAll('</tr>', '</td></tr>');
  a = a.replaceAll('</th></td></tr>', '</th></tr>');
  a = a.replaceAll('</td></td>', '</td>');
  document.write(a);
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

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

tr:nth-child(even) {
  background-color: #dddddd;
}
Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
Tanishq Pal
  • 1

1 Answers1

-1

Try this:

  1. Add a div to the body, with a class of test
<div class="test"></div>
  1. Update the document.write to be document.appendChild like this:
document.querySelector('.test').appendChild(table);

table has to be a DOM element, so create it with let table = document.createElement('table'); and then replace a with tableContent, like this:

const csv = `id,species,name
0,Panthera leo,Lion
1,Canis Lupus,Wolf
2,Capra hircus,Goat
3,Panthera pardus,Leopard
4,Equus zebra,Zebra`;

getData();
function getData() {
  //const response = await fetch('new.csv');
  //const data = await response.text();
  const data = csv;
  let tableContent;
  tableContent = data.slice(15);
  tableContent = tableContent.replace(/,/g, '</td><td>');
  tableContent = tableContent.replace(/\n/g, '</tr><tr><td>');
  let start = "<tr><th>id</th><th>species</th><th>name</th><tr><td></tr>";
  let end = "</td></tr>";
  let semi = start.concat('', tableContent);
  tableContent = semi.concat('', end);
  tableContent = tableContent.replace(/<tr><td><\/tr><\/tr>/g, '');
  tableContent = tableContent.replace(/<\/tr>/g, '</td></tr>');
  tableContent = tableContent.replace(/<\/th><\/td><\/tr>'/g, '</th></tr>');
  tableContent = tableContent.replace(/<\/td><\/td>/g, '</td>');
  let table = document.createElement('table');
  table.innerHTML = tableContent;
  document.querySelector('.test').appendChild(table);
}
Huw
  • 269
  • 2
  • 4
  • "I don't think there is a problem with your styles" — You're right, the problem is with the JavaScript, but this doesn't answer the question. – Quentin Nov 16 '20 at 11:15
  • @Quentin Can you please explain what I am doing wrong here ? Can I do the same thing without the DW ? – Tanishq Pal Nov 16 '20 at 11:28
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/27630280) – korona Nov 16 '20 at 12:44