Using an array to create a table through JavaScript by the for looping method

Question

I need help create a table through an array and also separating the parts in to different category. I am using a for loop. right now I got the table form but I need help separating the different fields. this what I got so far.

<!DOCTYPE HTML>
<html lang="en">
<head>
<script type="text/javascript">
<!--
var rawteamstats = new Array;
rawteamstats[0] = [Teams:"Sharks",Wins:"3",Loss:"1",Ties:"2"];
rawteamstats[1] = [Teams:"Jets",Wins:"2",Loss:"4",Ties:"1"];
rawteamstats[2] = [Teams:"AppleDumplings",Wins:"3",Loss:"3",Ties:"1"];
rawteamstats[3] = [Teams:"MightyShrimp",Wins:"1", Loss:"5",Ties:"0"];
rawteamstats[4] = [Teams:"Volcano",Wins:"2", Loss:"2",Ties:"2"];
rawteamstats[5] = [Teams:"Phoniox",Wins:"2",Loss:"3",Ties:"1"];
	

//-->
</script>
	<title>Baseball Standing</title>
</head>
<body>
	
	<p id="demo"></p>
	<script>
	
	var rawteamstats, text, TLen, i;

tLen = rawteamstats.length;

text = "<table border=1>";
for (i = 0; i < tLen; i++) {
  text += "<tr>"+"<td>" + rawteamstats[i] + "</td>"+"</tr>";
}
text += "</table>";

document.getElementById("demo").innerHTML = text;

	</script>
</body>
</html>

Rush W. · Accepted Answer · 2020-05-18 11:21:42Z

var rawteamstats = new Array;
var header = ["Teams", "Wins", "Loss", "Ties"];
rawteamstats[0] = {
    Teams: "Sharks",
    Wins: "3",
    Loss: "1",
    Ties: "2"
};
rawteamstats[1] = {
    Teams: "Jets",
    Wins: "2",
    Loss: "4",
    Ties: "1"
};
rawteamstats[2] = {
    Teams: "AppleDumplings",
    Wins: "3",
    Loss: "3",
    Ties: "1"
};
rawteamstats[3] = {
    Teams: "MightyShrimp",
    Wins: "1",
    Loss: "5",
    Ties: "0"
};
rawteamstats[4] = {
    Teams: "Volcano",
    Wins: "2",
    Loss: "2",
    Ties: "2"
};
rawteamstats[5] = {
    Teams: "Phoniox",
    Wins: "2",
    Loss: "3",
    Ties: "1"
};

var rawteamstats, text, TLen, i;

let tableHTML = "<table id='tab'><thead>";
header.forEach(function(head) {
  tableHTML += "<th>" + head + "</th>";
});
tableHTML += "</thead><tbody>";
rawteamstats.forEach(function(obj){
  tableHTML += "<tr>";
  var keys = Object.keys(obj);
  keys.forEach(function(key){
    tableHTML += "<td>" + obj[key] + "</td>";
  });
  tableHTML += "<tr>";
});
tableHTML += "</tbody></table>";
document.getElementById("demo").innerHTML = tableHTML;

#tab {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#tab td, #tab th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tab tr:nth-child(even){background-color: #f2f2f2;}

#tab tr:hover {background-color: #ddd;}

#tab th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

<!DOCTYPE HTML>
<html lang="en">

<head>
  <title> Baseball Standing </title>
</head>

<body>
  <p id="demo"></p>
</body>

</html>

Luke Garrigan · Accepted Answer · 2020-05-18 11:19:15Z

You're really close, I'll point you in the right direction, the code you'll want will look something like this:

<!DOCTYPE HTML>
<html lang="en">

<head>
    <script type="text/javascript">
        var rawteamstats = new Array;
        rawteamstats[0] = {Teams: "Sharks", Wins: "3", Loss: "1", Ties: "2"};
        rawteamstats[1] = {Teams: "Jets", Wins: "2", Loss: "4", Ties: "1"};
        rawteamstats[2] = {Teams: "AppleDumplings", Wins: "3", Loss: "3", Ties: "1"};
        rawteamstats[3] = {Teams: "MightyShrimp", Wins: "1", Loss: "5", Ties: "0"};
        rawteamstats[4] = {Teams: "Volcano", Wins: "2", Loss: "2", Ties: "2"};
        rawteamstats[5] = {Teams: "Phoniox", Wins: "2", Loss: "3", Ties: "1"};
    </script>
    <title>Baseball Standing</title>
</head>

<body>

    <p id="demo"></p>
    <script>

        var text, TLen, i;

        tLen = rawteamstats.length;
        text = "<table border=1>";
        for (i = 0; i < tLen; i++) {
            text += "<tr>" + "<td>" + rawteamstats[i].Teams + "</td>" + "</tr>";
        }
        text += "</table>";

        document.getElementById("demo").innerHTML = text;

    </script>
</body>

</html>

In your first script tag where you define your array, rather than:

rawteamstats[0] = [Teams: "Sharks", Wins: "3", Loss: "1", Ties: "2"];

you want, as it's an object:

 rawteamstats[0] = {Teams: "Sharks", Wins: "3", Loss: "1", Ties: "2"};

Next in your second script tag, you have:

var rawteamstats, text, TLen, i;

You want to remove the rawteamstats from this as you are redefining what you've already created in the first script tag:

var text, TLen, i;

Next you want to grab the specific properties of that object you created, in the example I've provided I only grab the Teams property, I'm sure you'll want their stats too:

text = "<table border=1>";
for (i = 0; i < tLen; i++) {
    text += "<tr>" + "<td>" + rawteamstats[i].Teams + "</td>" + "</tr>";
}
text += "</table>";

Clarence Bitegeko · Accepted Answer · 2020-05-18 12:27:40Z

Here is a implementation of a user defined function to draw table given an array of objects as per your problem. Remember to use curly bracket {} when assigning values as JavaScript Object.

The rest is the manipulation of JavaScript object to get keys and values as well as well as using loops to automate repeating code blocks.

<!DOCTYPE HTML>
<html lang="en">
<head>
<script type="text/javascript">
<!--
var rawteamstats = [];
rawteamstats[0] = {Teams:"Sharks",Wins:"3",Loss:"1",Ties:"2"};
rawteamstats[1] = {Teams:"Jets",Wins:"2",Loss:"4",Ties:"1"};
rawteamstats[2] = {Teams:"AppleDumplings",Wins:"3",Loss:"3",Ties:"1"};
rawteamstats[3] = {Teams:"MightyShrimp",Wins:"1", Loss:"5",Ties:"0"};
rawteamstats[4] = {Teams:"Volcano",Wins:"2", Loss:"2",Ties:"2"};
rawteamstats[5] = {Teams:"Phoniox",Wins:"2",Loss:"3",Ties:"1"};

function drawTable(arrayOfObjects){
	var tableText="<table border=1>";
	var headerSet=false;
	for(let row of arrayOfObjects){
		var rowData='';
		if(!headerSet){
			var keys=Object.keys(row);
			for(let key of keys){
				rowData+="<th>"+key+"</th>";
			}
			rowData="<tr>"+rowData+"</tr>";
			headerSet=true;
			tableText+=rowData;
			rowData="";

		}
		var values=Object.values(row);
		for(let data of values){
			rowData+="<td>"+data+"</td>";
		}
		tableText+="<tr>"+rowData+"</tr>";

	}
	tableText+="</table>";
	return tableText;
}
	

//-->
</script>
	<title>Baseball Standing</title>
</head>
<body>
	
	<p id="demo"></p>
	<script>
	
	document.getElementById("demo").innerHTML = drawTable(rawteamstats);

	</script>
</body>
</html>

Collectives™ on Stack Overflow

Using an array to create a table through JavaScript by the for looping method

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related