Displaying List Of JavaScript Objects As HTML List Items
<p>When I attempt this, the HMTL page only displays the last object, instead of all the objects. </p>

<p>Here is my JavaScript file</p>

<pre><code>var family = {
  aaron: {
    name: 'Aaron',
    age: 30
  },
  megan: {
    name: 'Megan',
    age: 40
  },
  aaliyah: {
    name: 'Aaliyah',
    age: 2
  }
}

var list = function(family) {
  for (var prop in family) {
    var elList = document.getElementById('aaron-family').innerHTML = prop;
  }
}

list(family);
</code></pre>

<p>And here's my HTML file</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Aaron's Test With Objects&lt;/title&gt;
&lt;/head&gt;
  &lt;li id="aaron-family"&gt;Hey, this is where it goes&lt;/li&gt;
&lt;footer&gt;
  &lt;script src="objects.js"&gt;&lt;/script&gt;
&lt;/footer&gt;
&lt;/html&gt;
</code></pre>