title: Dynamically creating grouped lists using array of objects
body: <p>I have a nested array of objects as follows:</p>
  
  <pre><code>result = [
             [{"country":"France","continent":"Europe","name":"street a"}],
             [{"country":"Brazil","continent":"South America", "name":"street b"},{"country":"Brazil","continent":"South America", "name":"street c"}],
             [{"country":"Germany","continent":"Europe","name":"street d"}]
           ]
  </code></pre>
  
  <p>Note that this was generated from an array of objects after sorting, using continent and then the country keys.</p>
  
  <p>I want to dynamically generate a list as follows (continent and then countries) and add it to a <code>div</code>:</p>
  
  <ol>
  <li>Europe
  
  <ul>
  <li>France
  
  <ul>
  <li>street a</li>
  </ul></li>
  <li>Germany
  
  <ul>
  <li>street d</li>
  </ul></li>
  </ul></li>
  <li>South America
  
  <ul>
  <li>Brazil
  
  <ul>
  <li>street b</li>
  <li>street c</li>
  </ul></li>
  </ul></li>
  </ol>
  
  <p>Each time the countries and the continents returned would be different but the result array would be grouped in continent,country order.</p>
  
  <p>Since I am new to HTML, CSS and JavaScript, I am not able to figure out how to dynamically create this list. So far I have managed to generate a unique list of only the continents using :</p>
  
  <pre><code>for(var i=0;i&lt;result.length;i++){
      if($('#continent-list li').filter(function(){
           return $(this).text() == result[i][0].continent;
      }).length == 0){
           $('#continent-list').append('&lt;li&gt;'+result[i][0].continent+'&lt;ul&gt;&lt;/ul&gt;&lt;/li&gt;');
  }
  </code></pre>
  
  <p>ie., I iterate through the list and only bother to see the first element [result[i][0]) and add this to an unordered list called 'continent-list'. Each time I also check if the name already exists in the unordered list and if it does not, only then I add.</p>