Differences

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

--- web_design:horario:arrays [2021/10/11 18:55]
mag
+++ web_design:horario:arrays [2023/08/16 09:33] (current)
@@ Line 107: / Line 107: @@
 newRow    = tableBody.insertRow(0);
 newRow.innerHTML = statsRow;</code>
+  * That's a lot of work for just displaying one line, but we don't have to go through the same thing every time.
+==== Multidimensional Arrays ====
+  * We really want our program to run through all our players. So we have a list of players each containing a list of stats. In other words, we have an array of arrays or a multidimensional array. Let's start with the data we already know.
+  * First, delete the Javascript code we made above.
+<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']
+          ];</code>
+  * Note that each line is an element in the larger list, so we separate them by <html>,</html>.
+  * The only <html>;</html> is at the end of the entire statement.
+  * So we are saying that we have an array of arrays (list of lists) called <html>players</html>.
+  * We want to show each player in turn, so we need data from <html>players[0]</html>, <html>players[1]</html>, <html>players[2]</html> and <html>players[3]</html>. Rather than writing out each of these in turn, we can use a javascript loop as follows.
+<code>// loop through all players
+for (p = 0; p < players.length; p++) {
+}</code>
+  * It's called a loop because it will loop (iterate) through any code inside the <html>{}</html> as many times as needed. We define how many times with the structure before the <html>{</html>.
+  * There are a few ways to do this, but we'll start with a <html>for</html> loop, using <html>p</html> as our iterator.
+  * Inside the <html>()</html> we can see three code items separated by <html>;</html>.
+  * The first <html>p = 0</html> tells the computer where to start - by assigning variable p a value of 0.
+  * 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