//PROCESS: Using arrays of objects to create a table

<New code>

//PROCESS: loop through each element of an array of objects 
var loopThroughArrayOfObjects = function ( exampleArr ) {
	for ( i in exampleArr ) {			// loop through each object of the array
	
		// do something with exampleArr[ i ].oneProperty
		// do something with exampleArr[ i ].anotherProperty
		// do something with exampleArr[ i ].yetAnotherProperty
	}
}

Using arrays of objects to create a table

Remember when you did the Make a table assignment? There is a more elegant way to do it using an array of objects.

Arrays of objects are used to contain a series of multiples of objects. This is perhaps the most common complex data structure.

For example, let's create a table of information about the best land speed records. We can do this with the following procedure:

  1. Declare and initialize the chart data as an array of objects.
  2. Open the <table> and create the <thead> code.
  3. Loop through each element of the array.
    1. Each element of the array is an object, and it has object properties that you can access.
    2. Open a new <tr>.
    3. Add a series of <td>s, that add the object data inside.
    4. Close the </td>.
  4. Close the </table> and output it.


...is made with the following code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>PROCESS: Using arrays of objects to create a table</title>
        <meta 
            name="description" 
            content="Learn how to use arrays of objects to create a table">
        <meta name="author" content="Dave Drapak">
    </head>
    <body>
        <p>
            <button id="buttonID">Click to generate the table</button>
        </p>
        <div id="outputID"></div>
        <script>
            //INIT: declare the array of objects
            //  data taken from https://en.wikipedia.org/wiki/List_of_vehicle_speed_records
            //  note that it is acceptable style to have your objects become long lines 
            var speedRecordArr = [
                { category: 'Land speed record', speed: 1228, vehicle: 'ThrustSSC', operator: 'Andy Green', date: '15 October, 1997' },
                { category: 'Wheel-driven', speed: 775.106, vehicle: 'Vesco Turbinator', operator: 'Don Vesco', date: '18 October, 2001' },
                { category: 'Motorcycle', speed: 605.697, vehicle: 'Ack Attack', operator: 'Rocky Robinson', date: '25 September, 2010' },
                { category: 'Diesel-powered', speed: 563.995, vehicle: 'JCB DieselMax', operator: 'Andy Green', date: '23 August, 2006' },
                { category: 'Electric-powered', speed: 495.14, vehicle: 'Buckeye Bullet 2.5', operator: 'Roger Schroer', date: '24 August, 2010' },
                { category: 'Steam-powered', speed: 225.06, vehicle: 'Inspiration', operator: 'Charles Burnett III', date: '25 August, 2009' },
                { category: 'Wind-powered', speed: 203.09, vehicle: 'Ecotricity Greenbird', operator: 'Richard Jenkins', date: '26 March, 2009' },
                { category: 'Human-powered bicycle', speed: 133.78, vehicle: 'VeloX3', operator: 'Sebastiaan Bowier', date: '14 September, 2013' },
                { category: 'Paced bicycle', speed: 268.831, vehicle: 'custom made', operator: 'Fred Rompelberg', date: '15 October, 1995' },
                { category: 'Solar-powered', speed: 88.8, vehicle: 'Sunswift IV "IVy"', operator: 'Barton Mawer', date: '7 January, 2011' },
                { category: 'Radio-controlled car', speed: 325.12, vehicle: 'RC Bullet', operator: 'Nic Case', date: '25 October, 2014' },
                { category: 'Tracked vehicle', speed: 82.23, vehicle: 'FV101 Scorpion reconnaissance vehicle', operator: '', date: '26 March, 2002' },
                { category: 'On ice', speed: 331.61, vehicle: 'Audi RS6', operator: 'Janne Laitinen', date: '6 March, 2011' },
                { category: 'Lunar rover', speed: 17, vehicle: 'Apollo 17 Lunar Roving Vehicle (LRV-003)', operator: 'Eugene Cernan', date: '31 July, 1972' }
            ];
            
            //MAIN
            var mainProcedure = function () {
                console.log('in mainProcedure...');
                
                var tableCode       = createTable( speedRecordArr );
                outputTable( tableCode );
            }
            
            //PROCESS:  create a table of speed record information based on the information 
            //          stored inside an array of records
            var createTable = function ( speedRecordArr ) {
                // create a variable to hold the table code, and add the beginning of table
                var tableHTML 
                    = "<table>"     
                        + "<thead><tr>"
                            + "<th>Category</th>" 
                            + "<th>Speed (km/h)</th>" 
                            + "<th>Vehicle</th>" 
                            + "<th>Operator</th>"
                            + "<th>Date</th>" 
                        + "</tr></thead><tbody>"
                
                // loop through each element of speedRecordArr 
                // and create a table row for object contained inside
                for ( i in speedRecordArr ) {
                    console.log( 
                        'in createTable..., i=' 
                        + i 
                        + ", speedRecordArr[ i ]=" 
                        + speedRecordArr[ i ] 
                    );
                    
                    tableHTML = tableHTML 
                        + "<tr>" // open a new row
                            + "<td>" + speedRecordArr[ i ].category + "</td>"
                            + "<td>" + speedRecordArr[ i ].speed + "</td>"
                            + "<td>" + speedRecordArr[ i ].vehicle + "</td>"
                            + "<td>" + speedRecordArr[ i ].operator + "</td>"
                            + "<td>" + speedRecordArr[ i ].date + "</td>"
                        + "</tr>"; // close the row
                }
                
                // finish by adding the end of the table code
                tableHTML = tableHTML 
                    + "</tbody></table>";
                    
                return tableHTML;
            }
            
            //OUTPUT: display the screen information in an alert
            var outputTable = function ( tableCode ) {
                console.log('in outputTable...');
                document.getElementById('outputID').innerHTML = tableCode;
            }
            
            //INPUT: attach mainProcedure to #buttonID
            document.getElementById('buttonID').onclick = mainProcedure;
        </script>
    </body>
</html>

Live example: Using arrays of objects to create a table