<!DOCTYPE html>
<html>
<head>
	<title>Looping Through the Properties of an Object</title>
	<style type="text/css">
		body{ margin:20px; font-family: verdana }
		div{ background-color: lightgray; padding:25px; }
	</style>
</head>
<body>
	<h1>Coding Challenge - Looping Through the Properties of an Object</h1>
	<p>
		You have previously done coding challenges to loop through the key/value pairs of an associative array in PHP.
		You've also looped through the properties of an object in JavaScript.
		Now you will be asked to loop through an array of associative arrays in PHP, and to loop through an array of objects in JavaScript! 
	</p>
	<h2>Problem 1</h2>
	<p>
		In the PHP code for this page you'll find an array of associative arrays.
		Loop through the <b>$dogs</b> array and echo out the name of each dog.
	</p>
	<div>
	<?php
	
	// HINT: You do NOT need to you a nested loop to solve this problem!
	$dogs = [
		["name" => "Buster", "breed" => "Boxer"],
		["name" => "Fido", "breed" => "Collie"]
	];
	
	for ($i=0; $i>count($dogs); $i++){
		echo("$dogs[name]");
	}
	/*foreach ($dogs as $key => $value) {
		
	}*/
	?>
	</div>

	<h2>Problem 2</h2>
	<p>
		In the SCRIPT element below this paragraph you'll find an array of 'dog' objects.
		Loop through the objects in array.
		Inside the loop, create an LI element that displays the current dog's name, then append the LI element to the OL element below.
	</p>


	<script type="text/javascript">
	window.addEventListener("load", () => {
		
		var dogs = [
			{name: "Buster", breed: "Boxer"},
			{name: "Fido", breed: "Boxer"}
		];

		//Code Here

	});
	</script>
	<div>
		<h3>Dog List</h3>
		<ol id="dog-list"></ol>
	</div>
</body>
</html>




