Embedding html/css in javascript output

Question

All, I have this output that I am exporting onclick to excel:

const final = totalBatches.reduce((AB, now, idx) => {
let A1 = z(AB, 8);
let A2 = z(AB + now / 2 - 1, 8);
let B1 = z(AB + now / 2, 8);
let B2 = z(AB + now - 1, 8);
output += `Batch ${z(idx + 1, 2)}A | ${prefix} ${A1} - ${prefix} ${A2}\n`;
output += `Batch ${z(idx + 1, 2)}B | ${prefix} ${B1} - ${prefix} ${B2}\n`;
return AB + now;
}, init);

outputEl.innerHTML = output;
}

The problem is, it needs to be formatted into separate columns so the excel sheet is formatted properly. So I added the following to output +=:

output += `\<tr\>\<td\>Batch ${z(idx + 1, 2)}A \</td\>\<td\>${prefix} ${A1} \</td\>\<td\>${prefix} ${A2}\</td\>\</tr\>\n`;
output += `\<tr style="border-bottom: 1px solid black;"\>\<td\>Batch ${z(idx + 1, 2)}B \</td\>\<td\>${prefix} ${B1} \</td\>\<td\>${prefix} ${B2}\</td\>\</tr\>\n`;

This (mostly) works. My excel export is now formatted into separate columns. But there are at least two problems. 1, it's ugly/clunky and hard to read... there has to be a more efficient way of doing this.

2, I haven't figured out a way for this output to have inline style for the user to have visual cues on the html page before export (I want every other row to be underlined or colored for ease of reading).

I'm kindergarten level Javascript... do I use encodeURIComponent() or another global method?

Could I do something like

let TD = fancy.encoded.stringInColumn;

To make this cleaner and format properly? Thanks for any input it's greatly appreciated.

To clarify: this also needs to be displayed in a html page as well as export to Excel.

why don't you use CSV instead of formatting your data into a HTML table — Roko C. Buljan
– Roko C. Buljan, Commented Sep 21, 2022 at 17:12
I didn't use CSV so the end user wouldn't have to import into Excel. — Ringthane
– Ringthane, Commented Sep 21, 2022 at 17:16
I've read many times your question and I'm still unable to understand your problem. And the desired output string. — Roko C. Buljan
– Roko C. Buljan, Commented Sep 21, 2022 at 17:19
The problems: 1. the code itself is hard to read. I'm asking if there's a cleaner way. 2. Inline style isn't rendering correctly so I'm not escaping it properly, the second output row doesn't display a bottom border. — Ringthane
– Ringthane, Commented Sep 21, 2022 at 17:27

Driftr95 · Accepted Answer · 2022-09-26 01:09:20Z

Maybe you should have the output as a list of objects [each row as an object] and then convert to html table. You could define a function like :

function jsonToTable(jsOp, colNames){
    var op = '', rowHtml = '';
    for (let c=0; c<colNames.length; c++) {
        rowHtml += `<th>${colNames[c]}</th>`;
    }
    op += `<tr>${rowHtml}</tr>`;
    for (let r=0; r< jsOp.length; r++){
        rowHtml = ''; var rowData = jsOp[r];
        var rowStyle = i%2==0 ? '' : ' style="border-bottom: 1px solid black;';
        for (let c=0; c<colNames.length; c++) {
            var colName = colNames[c];
            rowHtml += `<td>${rowData[colName]}</td>`;
        }
        op += `<tr ${rowStyle}>${rowHtml}</tr>`;
    }
    return `<table>${op}</table>`;
}

and then just call as output = jsonToTable(opObj, colHeaders); and from what I can see from your example, your opObj and colHeaders would look like:

var opObj = [
    {
        'col1Name': `Batch ${z(idx + 1, 2)}A`,
        'col2Name': `${prefix} ${A1}`,
        'col3Name': `${prefix} ${A2}`,
    },
    {
        'col1Name': `Batch ${z(idx + 1, 2)}B`,
        'col2Name': `${prefix} ${B1}`,
        'col3Name': `${prefix} ${B2}`,
    }
]
var colHeaders = ['col1Name', 'col2Name', 'col3Name']

(As far as I can tell, '<' and '>' do not need to be escaped with backslash.)

Also, if you're willing to add a stylesheet or a style block with css, you can take a look at this striped table example, and then you can forego the rowStyle bits.

For me, at least, that would make the code look a bit cleaner.

Collectives™ on Stack Overflow

Embedding html/css in javascript output

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related