Let's say you have the following database Products table
This is a perfect scenario to use an arrays of arrays in JavaScript.
Here is how you would store the records, let's ignore the column headers and just concentrate on the record rows and columns.
So before we start coding we will go into how the arrays will store the values in each rows and columns.
We are used to using single dimensional arrays that looks like this products[0], the problem with this way of defining the array is that there's no mechanism to access a specific row and column.
Instead what we want to do is store the values with an index of rows of columns like this products[0][0]. By defining the array with two indexes we know exactly what array indexes we are accessing. So products[0][0] will have the value of "ACME Coffee" because we access the array with the index of row 0 and column 0, which are a basically row 1 and column 1 in the database because JavaScript arrays starts with index of 0.
Type in the code below to define an arrays of arrays of products
<script> var products = new Array(2); for (var i = 0; i < products.length; i++) { products[i] = new Array(5); } products[0][0] = "ACME Coffee"; products[0][1] = 12.00; products[0][2] = "Dark Roast"; products[0][3] = "ACME Big Box"; products[0][4] = 10; products[1][0] = "ACME Spinner"; products[1][1] = 19.99; products[1][2] = "Spins a lot"; products[1][3] = "ACME Big Box"; products[1][4] = 100; </script>
Now if we want to access the array on row 2 and column 1 which has the value of "ACME Spinner"
we would type products[1][0]. If we write to the console it would be
console.log(products[1][0]);
And if we display the products in the console with the code
console.log(products);
We will see that the array has two rows and five columns
Most of the time we want to iterate through the arrays of arrays and get the all the values. So how would we do that?
Well the answer is that we have to use a nested for loop to loop through the rows and columns like the code below.
for (var row = 0; row < products.length; row++)
for (var col = 0; col < products[row].length; col++)
console.log(products[row][col]);
The preceding code uses the outer for loop to loop through the row, and uses the inner for loop to loop through the columns, by using the length as the exiting condition for both loops. The resulting output looks like the following in the browser console.
Good blog app fitting
ReplyDelete