CODEWITHSUNDEEP
javascripthtml
Katie Janusch
Katie Janusch

Reputation: 1

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

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>

Upvotes: 0

Views: 46

Answers (3)

Clarence Bitegeko
Clarence Bitegeko

Reputation: 76

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>

Upvotes: 0

Rush W.
Rush W.

Reputation: 1361

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>

Upvotes: 2

Luke Garrigan
Luke Garrigan

Reputation: 5011

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>";

Upvotes: 0

Related Questions