Create Excel Format Output using HTML and JavaScript - javascript

I had interview and question asked was:
Write a JS plugin that can take cell and value as input and render excel format output on browser. For example,
Given Input (cell and value):
J3 = 5
A2 = 20
K1 = 10
Output on browser should be in excel format
A B C ....... J K .......
1 10
2 20
3 5
..
I Was looking for correct solution for the problem.
I tried solving this problem (writing psudeo code)
var cell = {"J3": 5, "A2":20, "K1": 10}
// Function they will call for generate excel style table
generateExcel(cell, selector) {
1. create blank table which has A-Z column (with selector as A-Z resp) and 1 to 100 rows (with selector as 1 to 100 resp)
2. Loop through each cell and for each cell
2.1 find the column (J) and row (3)
2.2 Add/replace value in that TD
3. Once all the information from cell in enter in table, print the table in the document at given selector
}
They said it won't be efficient for huge number of cell inputs. I suggest that we can use Matrix create table
A B... J K ....
1 [ 10 ]
2 20
3 5

I think you started off well. Begin by creating a table that will contain the elements. This will be 26 columns wide and as tall as the largest y value. Convert the letters to numbers.
Sorry for w3schools link, I'm liable to get downvoted for even mentioning them, but they have the best laid out documentation on the table object that I could google for you. I will update it if someone has something better.
http://www.w3schools.com/jsref/dom_obj_table.asp
MDN Tutorial
https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
You can then access the table cell most efficiently through
var table = ;//get by id or create element, not sure what they expect
table.rows[y].cells[x].appendChild(...);

Excel spreadsheets are tables. Can you use a simple table? If so, I would recommend the CSS border-collapse property to make it look better, as well as perhaps reducing cell padding and margin.

Related

Dynamic bootstrap Rows and Cols bases on array length

I am trying to create dynamic rows and cols based on the length of arryaOfString. I have a chart to display within the cols. So the JSON will have country list as Array of strings and based on the selection, I need to display individual country charts.
If arrayOfString's length == 1, 1 Row, 1 Col
If arrayOfString's length == 2, 1 Row, 2 Col
If arrayOfString's length == 3, 2 Row, 3 Col.
If arrayOfString's length == 4, 2 Row, 4 Col.
I've seen samples Creating div tag dynamically based on rows count where they are creating HTMLElements using JS but I am not sure If i can inject my Chart component using this logic.
Below is simple code sandbox, where I just hardcoded the values inside the Col. However I am unable to find or create any logic to achieve this task on dynamically adding new rows based on array length.. Please help.
https://codesandbox.io/s/bootstrap-grid-demo-on-react-using-reactstrap-forked-8xw0dy?file=/src/index.js

Print For-Loop results in a table

I have 10 rows of data on my input step, i transform them in a for-loop and i should get more than 10 rows, but in this case i get the last transform of each iteration that the loop have for each data
I tried to use appendToFile() but the result data is not useful and pentaho read it as a unique header
On my alert() method i can see that the for loop transform the data.
var PERIODO = 2
var i
var fecha_final
//var ruta_acess ="D:\TEST.accdb"
//var contenido
////var contenido2
//var arreglo_completo
for (i=0; i<=PERIODO; i++){
fecha_final = dateAdd(FECHA_INICIO,"d",i)
Alert(i)
}
As I show in the below photo i get only 10 records and in the other photo appears the result that i want that are the results data of each iteration of the for-loop
Modified JavaScript value photo:
Expected result:
Obtained result:
For loops are not really a thing in PDI. Transformations work on sets of rows that flow through the steps, so it's best for performance and stability to use that mindset.
In your scenario each incoming row should end up as three copies, but with different calculated values based on a single new field (with values 0,1,2).
The way to do this in PDI is with a Join rows (cartesian product) step. It takes two sets of input rows and outputs a row for every combination of input rows, possibly filtered by defining a key field that has to match. So if you have 10 rows in the main input and 3 rows in the second, it will output 30 rows.
You will first need to create a data grid as the second input. Define a single integer field, name it something clear and on the second tab fill three rows with 0, 1 and 2 respectively.
Connect both inputs to the Join rows step. You don't need to configure any matching key.
The output of the Join step will be three rows for each input row, one with each of the values 0, 1, 2. Connect that output to a Calculator step and use the calculation Date A + B days to replace the logic from your javascript step.
what i mean is that in the obtained result photo the "i" variable only shows the value of "3" and i would like to have "1", "2" and "3"
to solve this i used
var row = createRowCopy(getOutputRowMeta().size())
var idx = getInputRowMeta().size()
row[idx++] = DPROCESS
this add a row for each result of the iteration.
before the tranformation result showed to me only the last value of each loop.

How to Merge rows in Google Sheets

I tried digging this stuff and have no solution so I'm hoping someone can assist. I have a sheet with the following:
Data
123|456|789
111|222|333
etc...
Result Needed
|123 456 789|
|111 222 333|
etc...
I'm trying to avoid formulas (=Concat) and (=A2&" "&B2&" "&C2) etc...
I tried sheet.getRange(2,1,1,2).mergeAcross(); and it merged the cells and kept he left-most value. Google searches point to the formula solution.
You can try Array.join() for each row:
Snippet:
var jointRowsArray = sheet
.getRange(2, 1, 2, 3) //A2:C4
.getValues()
.map(function(row) {
return [row.join(' ')];//join Each row
});
sheet.getRange(2, 4, jointRowsArray.length, 1).setValues(jointRowsArray);
To Read:
Arrays
Array#join
Array#map
Range#setValues
Best Practices
var range = sheet.getRange(2,1,1,2)
var values = range.getValues()
range.clearContent()
sheet.getRange(2,1).setValue(values.join(' '));
You can pull the values into JS and then join and insert them into a single cell. You can also place this inside an iterator and do something akin to getRange(i,1,1,2). This can be triggered manually or by an edit hook.
However, this seems like the perfect fit for a single formula.
=TRANSPOSE(QUERY(TRANSPOSE(A:C),,COLUMNS(A:C)))
The formula would go on the first row in perhaps column D. JOIN functions cannot usually be arrayed in google sheets, and you would normally have to put a formula in for every row. However, here we are tricking the sheet into thinking our data is the header and displaying it accordingly.

Displaying items from Google SpreadSheet. Text Formatting issue

I am using JavaScript to get data from a spreadsheet and outputting to a html file. It is only retrieving the most recent input which is what i want.
The website will display
"12/3/2016 12:49:10
"Katelynn Logan"
"more output"
"..."
and so on.
My end goal is to have it all neat where its like
"Date: Tested by: blahblah: other text:
12/03/2016 name string int or what
you get the idea. Right now its outputting every cell below the previous one.
Is there a way to make a template of the format you desire and it will output the information following the layout of that format?
date: name: PH
current date billybob 7.6
then output to next line
and so on. Or better yet,
Column A B C
D E F
H I J
here is where its getting the information. There's years of data in there so I apologize for the long scroll down
and here is the code where it outputs it.
var range = response.result;
var row = range.values[range.values.length-1];
// Print columns A and AO, which correspond to indices 0 and 40.
for(i=0; i<40; i++){ //
appendPre(row[i]);
}

Manipulate HTML Table in Browser

I do a lot of reading of charts and graphs, and I was wondering if there was a FF or GC extension that allows me to do things like swap rows and columns in a drag and drop type fashion.
For example, if I want to compare the values in Rows 1, 55, 92 and 143, is there a way I can rearrange the table to put those four rows at the top of the chart for easy comparison?
I know I could probably copy and paste it into Excel, I was hoping that there was a solution with the browser.
Firefox:
https://addons.mozilla.org/en-us/firefox/addon/tabletools2/
https://addons.mozilla.org/en-us/firefox/addon/export-to-csv/
You can also export to excel:
How to export html table to excel using javascript
http://www.mrkent.com/tools/converter/
I however... highlight what I need > cntrl c > cntrl v into excel and done.
var rowIndexWanted = [4, 5];
var table1 = document.getElementById('table1');
var table1body = table1.getElementsByTagName('tbody');
var rows = table1.getElementsByTagName('tr');
var rowsWanted = [];
for(i in rowIndexWanted)
{
rowsWanted.push(rows[rowIndexWanted[i]]);
}
for(i in rowsWanted)
{
table1body[0].insertBefore(rowsWanted[i], table1body[0].childNodes[0]);
}
Tip: you can select cells (in Firefox at least) by maintaining the Ctrl key pressed and selecting range of cells.
Bookmarklets from J. Ruderman let you sort a table by any column, transpose it or number the rows.
What you're searching seems similar to functionalities offered by frameworks like Kendo: column reordering or Aggregates?

Categories