Create a Javascript table that we can see - javascript

I would like to create a table that is entirely generated by Javascript; however I never did that and I searched a lot on the internet and I don't get how its supposed to works! For example I would want a 3 row and 4 columns table that would display when loading the page with information I would choose to put in it.

This is the code that you need...
var arr = new Array(2);// numbers of columns
for (i = 0; i < arr.length; i++) {
arr[i]=new Array();
}
arr[0] = new Array("a", "b", "c");//first column
arr[1] = new Array(1,2, 3);//second column
document.write('<table border="1">');
for (i = 0; i < arr.length; i++) {
document.write("<tr>");
for (j = 0; j < arr[0].length; j++) {
document.write("<td>"+arr[i][j]+"</td>");
}
document.write("</tr>");
}
you choose the imput

Related

Trouble adding 2d array contents on an HTML table

I'm making a battleship game implementation with HTML/JavaScript. This function is supposed to add the positions of the ships on an HTML table by copying the elements from a 2d array(p1Board) with the positions of the ships.
let displayTable = () => {
document.getElementById("player1turn").hidden = true;
let table = document.getElementById("player1board");
for(var i = 1; i < table.rows.length; i++){
for(var j = 1; j < table.rows.cells; j++){
table.rows[i].cells[j].innerHTML = p1Board[i - 1][j - 1];
}
}
document.getElementById("player1table").hidden = false;
}
document.getElementById("p1start").addEventListener("click", displayTable);
Then, when I open the program on my browser, the table appears but without the positions of the ships:
[Battleship Board][1]
[1]: https://i.stack.imgur.com/Nv1kA.png
The problem is that you are not specifying the row from which you want to get the cells. Also, once you get the cells, you need to access their .length property.
Change this line
for(var j = 1; j < table.rows.cells; j++)
for this
for(var j = 1; j < table.rows[i].cells.length; j++)

How do i split up an array that holds an array?

Hello my fellow JS friends,
I am letting a user import a csv file (excel sheet) and i convert that into
an array. which has 472 rows and 87 columns in this case.
so my array looks like this:
and everything is separated by commas like a usual array.
The issue is I need to separate the array within the array and when i do that i get an array with the length of 9 million, which i think is wrong
vm.allTextLines = files.split(/\r\n|\n/);
var headers = vm.allTextLines[0].split(',');
vm.columnCount = headers.length;
vm.rowCount = vm.allTextLines.length - 1;
for (var i = 0; i < vm.allTextLines.length; i++) {
// split content based on comma
var data = vm.allTextLines[i].split(',');
if (data.length == headers.length) {
var tarr = [];
for (var j = 0; j < headers.length; j++) {
tarr.push(data[j]);
}
vm.lines.push(tarr);
}
}
//this is where i split the array that contains the csv
//data and put it into its own array I believe this is
//where the issue is.
for(var i=1;i<vm.allTextLines.length; i++){
vm.uniqueAll.push(vm.allTextLines[i].split(','));
for(var j=0; j < vm.uniqueAll.length; j++){
for(var r =0; r < vm.uniqueAll[j].length; r++){
vm.arrayOfValuesOfFile.push(vm.uniqueAll[j][r]);
}
}
}
If you can help me correct this for each I would appreciate it alot.
Thank you in advance guys!
I agree with you about the place of error, because it seems you nested the loop in a wrong way. Following a snippet where you can check what I mean.
i.e:
let vm = {
allTextLines:['h1,h2,h3','row1val1,row1val2,row1val3', 'row2val1,row2val2,row2val3'],
uniqueAll: [],
arrayOfValuesOfFile:[]
}
// Here you should not nest the loop
for(var i=1;i<vm.allTextLines.length; i++){
vm.uniqueAll.push(vm.allTextLines[i].split(','));
}
for(var j=0; j < vm.uniqueAll.length; j++){
for(var r =0; r < vm.uniqueAll[j].length; r++){
vm.arrayOfValuesOfFile.push(vm.uniqueAll[j][r]);
}
}
console.log('allTextLines', vm.allTextLines);
console.log('uniqueAll', vm.uniqueAll);
console.log('arrayOfValuesOfFile', vm.arrayOfValuesOfFile);
Of Course you could easily optimize the algorithm:
let vm = {
allTextLines:['h1,h2,h3','row1val1,row1val2,row1val3', 'row2val1,row2val2,row2val3'],
uniqueAll: [],
arrayOfValuesOfFile:[]
}
for(var i=1;i<vm.allTextLines.length; i++){
let currentLinesValue = vm.allTextLines[i].split(',');
vm.uniqueAll.push(currentLinesValue);
for(var r =0; r < currentLinesValue.length; r++){
vm.arrayOfValuesOfFile.push(currentLinesValue[r]);
}
}
console.log('allTextLines', vm.allTextLines);
console.log('uniqueAll', vm.uniqueAll);
console.log('arrayOfValuesOfFile', vm.arrayOfValuesOfFile);
First you should transform you bidimensional array into a one-dimension array.
var allTogether = []; // Array with all your CSV (no matter from which file it came from)
for (var i = 0; vm.allTextLines.length; i++) {
allTogether.push(vm.allTextLines[i]); // Gets the CSV line an adds to a one-dimension array
}
// Now you can iterate over the one-dimension array
for (var i = 0; allTogether.length; i++) {
var csvFields = allTogether[i].split(',');
// Here goes your code that works with the CSV fields.
}

how to write a XML data 2 Dimensional Array

the snippt shows the XML detail : please referes to the image, shows the table...
<ExtractSummaryDateSet>
<_date>2017-09-20</_date>
<_portfolioSummaries>
<ExtractSummaryDateSetDetail>
<_portfolioName>52613661_CL</_portfolioName>
<_detail>
<Before>0</Before>
<After>-329</After>
<ChangeMaturing>0</ChangeMaturing>
<ChangeNew>-329</ChangeNew>
</_detail>
</ExtractSummaryDateSetDetail>
<ExtractSummaryDateSetDetail>
<_portfolioName>52613661_LP</_portfolioName>
<_detail>
<Before>0</Before>
<After>-329</After>
<ChangeMaturing>0</ChangeMaturing>
<ChangeNew>-329</ChangeNew>
</_detail>
</ExtractSummaryDateSetDetail>
<ExtractSummaryDateSetDetail>
<_portfolioName>526136|Total</_portfolioName>
<_detail>
<Before>0</Before>
<After>-329</After>
<ChangeMaturing>0</ChangeMaturing>
<ChangeNew>-329</ChangeNew>
</_detail>
</ExtractSummaryDateSetDetail>
I am trying to use 2 Dimential arrays in XML to create a table HTML
for (var i = 0; i < x.length; i++){
var row= x[i];
var date = row.getElementsByTagName("Date")[0].childNodes[0].nodeValue;
for(var j = 0;j < row.length; j++){
var before = row[j].getElementsByTagName("Before")[0].childNodes[0].nodeValue;
var after = row[j].getElementsByTagName("after")[0].childNodes[0].nodeValue;
}
}
just wanna know is the example above semantically correct?
in the second array can i use row[j] to call the array
for (var y = 0; y < x.length; y++){
for (var i = 0; i < x[i].length; i++){
table_summary +="<th></th><th></th><td>" + x[y][j].getElementsByTagName("_date")[0].childNodes[0].nodeValue + "</td>" ;
}
how do I pass the value correctly? x[y][i] can't not find the value.
I am working on XML format in web application and encounter to similar your issue. You can transform XML to HTML like your method but create HTML tags from XML is very cumbersome.
I suggest you use XSLT for this transform.
I created a simple XSLT for your XML and converted this transform very easily.
Please see Online transform and click html in result panel to see HTML output for your XML.
You can consider a multi dimensional array as an array of arrays.
so this is fine :
for (var i = 0; i < x.length; i++){
var row= x[i]
for(var j = 0;j < row.length; j++){
var before = row[j];
}
}
However you can also write this as :
for (var i = 0; i < x.length; i++) {
for(var j = 0;j < x[i].length; j++) {
var before = x[i][j];
}
}

insert rows using sheets on google spreadsheets

I am in the process of adapting the code below to insert a full row after function get emails is run. the extra row function works so i thought i would add line to the end of the getEmails. But it adds around 30 extra rows, i only need one added.
sheet.insertRows(2)
below is the getEmail code.
function getEmails() {
var label = GmailApp.getUserLabelByName("pollux");
var threads = label.getThreads();
var row = 3;
for (var i = 0; i < threads.length; i++) {
var messages=threads[i].getMessages();
for (var m=0; m < messages.length; m++) {
sheet.getRange(row,1).setValue(messages[m].getPlainBody());
row++;
sheet.insertRows(2);
some helpful suggestions would be great.
Cheers Mark
Remove this line sheet.insertRows(2);
and place outside this for loop
for (var i = 0; i < threads.length; i++) {
Changed code to
function getEmails() {
var label = GmailApp.getUserLabelByName("pollux");
var threads = label.getThreads();
var row = 3;
sheet.insertRows(2);
for (var i = 0; i < threads.length; i++) {
var messages=threads[i].getMessages();
for (var m=0; m < messages.length; m++) {
sheet.getRange(row,1).setValue(messages[m].getPlainBody());
row++;
now adds line and moves row down as 1 as i need.

having problems with for loop in javascript

I have a table with numbers but they are stored as string so I am trying to use the function parseFloat to convert it into a table of ints. However, no matter how I do the for loops it gives me a blank table. I can parse the row and it will give me a single int. I can parse a single int as well but cant seem to parse a row or the table. here is what I have so far. This is just trying to convert one row. I tried two for loops for the entire table but that didn't work either. thanks.
var c =[];
var entries = $.parseJSON('<?php print(json_encode($try, true)); ?>');
for (var j = 0; j < 12; j++)
{
for (var i = 0; i < 7; i++)
{
c [j][i] = parseFloat(entries[j][i]);
}
}
alert(c);
here is entries json encodes [["-248","-163","-455","-1413","-1294","-1296","-1089"],["-172","-219","-1186","-1368","-1480","-1079","-845"],["-98","-198","-703","-996","-1100","-585","-616"],["-116","-241","-498","-642","-704","-354","-430"],["-137","-117","-264","-525","-533","-269","-476"],["-12","87","-257","-463","-551","-302","-535"],["170","61","-250","-472","-659","-220","-605"],["159","96","-234","-513","-617","-196","-710"],["185","117","-272","-521","-610","-258","-798"],["208","95","-234","-534","-696","-280","-854"],["192","151","-188","-641","-739","-279","-957"],["249","223","-235","-684","-763","-339","-978"]]
You have to initialize the second dimension of your array to also be an array. As it stands now, c[j] is just a single value so you can't do c[j][i] on it. There is also an error in your first for loop where you need to compare the value of j, not i. See this fixed code:
var c = [];
var entries = $.parseJSON('<?php print(json_encode($try, true)); ?>');
for (var j = 0; j < 12; j++)
{
c[j] = [];
for (var i = 0; i < 7; i++)
{
c [j][i] = parseFloat(entries[j][i]);
}
}
alert(c);
In your first loop for (var j = 0; i < 12; j++), you are using i for iteration but it is undefined and it should be j instead of i
var c =[];
var entries = $.parseJSON('<?php print(json_encode($try, true)); ?>');
for (var j = 0; j < entries.length ; j++)
{
c[j] = [];
for (var i = 0; i < entries[i].length ; i++)
{
c [j][i] = parseFloat(entries[j][i]);
}
}

Categories

Resources