Differences

This shows you the differences between two versions of the page.

--- web_design:horario:arrays [2021/10/11 19:29]
mag [Arrays]
+++ web_design:horario:arrays [2023/08/16 09:33] (current)
@@ Line 132: / Line 132: @@
   * The third says that each time the loop finishes, we should increment p (add 1).
   * The second says to keep going while <html>p < players.length</html> is true. Recall that the element after the <html>.</html> belongs to the element before the <html>.</html>, so here <html>players.length</html> is the length of the array called players, which is 4. So the loop should run while p < 4, ie 0, 1, 2 and 3.
+  * Now, for each player, we need to create the statsRow as for the single player.
+  * We no longer have the variable called ospinaRamirez, so we have to find the right line in the players array. It's the first item in the array, so the index is 0, hence <html>players[0]</html> is the same as ospinaRamirez.
+<code>  // create stats string
+  statsRow  = "<td>" + players[p][0] + "</td>";
+  statsRow += "<td>" + players[p][1] + "</td>";
+  statsRow += "<td>" + players[p][2] + "</td>";
+  statsRow += "<td>" + players[p][3] + "</td>";
+  statsRow += "<td>" + players[p][4] + "</td>";</code>
+  * Place this code inside the for loop between the <html>{}</html>
+  * Finally, we can add the row to the table.
+<code>  tableBody = document.getElementsByTagName("tbody")[0];
+  newRow = tableBody.insertRow(p);
+  newRow.innerHTML = statsRow;</code>
+  * Notice that we've changed the <html>0</html> after <html>insertRow</html> to <html>p</html>. If we leave it as <html>0</html> we'll be adding the new line at the top each time. By putting it as the index of the player in the list, the list on screen will be the same as the list in our array.
+  * There's one last change to make. <html>tableBody</html> doesn't ever change, so there's no need to reassign it every time we go through the loop. Let's move that line above the loop so it's calculated first and never again.
+  * Our final code looks like this.
+<code>players = [
+  ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'],
+  ['Carlos', 'Eccehomo Cuesta Figueroa', 'Colombia', 22, 'Defensa'],
+  ['Juan Guillermo', 'Cuadrado Bello', 'Colombia', 33, 'Centrocampista'],
+  ['Radamel Falcao', 'García Zárate', 'Colombia', 35, 'Delantero']
+          ];
+tableBody = document.getElementsByTagName("tbody")[0];
+// loop through all players
+for (p = 0; p < players.length; p++) {
+  // create stats string
+  statsRow  = "<td>" + players[p][0] + "</td>";
+  statsRow += "<td>" + players[p][1] + "</td>";
+  statsRow += "<td>" + players[p][2] + "</td>";
+  statsRow += "<td>" + players[p][3] + "</td>";
+  statsRow += "<td>" + players[p][4] + "</td>";
+  // add row to table
+  newRow = tableBody.insertRow(p);
+  newRow.innerHTML = statsRow;
+}</code>
+  * This looks a lot more efficient now, but you still might think that it's easier to create the table in HTML than Javascript. Ok. What about if we use the full team? Can you imagine building the table with 26 players? Creating the array is much easier.
+[[web_design:horario:exercise|Next: Ejercicio]]

Tech School

User Tools

Site Tools

Differences

Page Tools