title: JavaScript Sort JSON data and dynamically generate <ul> and <li> elements based on key value
body: <p>I am attempting to dynamically generate some HTML lists based on JSON data fetched from a PHP script.
  The returned data is in the following format:</p>
  
  <p>SAMPLE JSON DATA:    </p>
  
  <pre><code>[{"animal":"Dog","breed":"German Shepard","image":"germanshepard.png","ownerID":"885","Status":"Check In"},
  {"animal":"Dog","breed":"Poodle","image":"poodle.png","ownerID":"131","Status":"Checked In"},
  {"animal":"Dog","breed":"Labrador","image":"labrador.png","ownerID":"6","Status":"Waiting Consultation"},
  {"animal":"Bird","breed":"Parrot","image":"parrot.png","ownerID":"22","Status":"Checked In"},
  {"animal":"Bird","breed":"Finch","image":"finch.png","ownerID":"31","Status":"Checked In"},
  {"animal":"Cat","breed":"Persian","image":"persian.png","ownerID":"19","Status":"Waiting Consultation"},
  {"animal":"Cat","breed":"Sphynx","image":" sphynx.png","ownerID":"44","Status":"Allocated Kennel"}]
  </code></pre>
  
  <p>I'm trying to create a div for each unique animal, ie. 1 div per unique animal. eg. </p>
  
  <pre><code>&lt;div class='dog'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Within each div I am trying to append an ul for each unique breed eg. </p>
  
  <pre><code>&lt;ul class='Poodle'&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>with the final result looking like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
  background: #fff;
  color: #000;
  border: 1 px thin solid #000;
  }
  
  /* repeat for all status classes */
  .Checked In {
  color: 'green';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id='container'&gt;
  &lt;div class='Dog'&gt;    
      &lt;ul class='German Shepard'&gt;
         &lt;li&gt;&lt;img src='germanshepard.png'/&gt;&lt;/li&gt;
         &lt;li class='${ownerID}'&gt;885&lt;/li&gt;
         &lt;li class='${Status}'&gt;Check In&lt;/li&gt;
      &lt;/ul&gt;    
      &lt;ul class='Poodle'&gt;
         &lt;li&gt;&lt;img src='poodle.png'/&gt;&lt;/li&gt;
         &lt;li class='${ownerID}'&gt;131&lt;/li&gt;
         &lt;li class='${Status}'&gt;Checked In&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;    
  &lt;div class='Bird'&gt;    
      &lt;ul class='Parrot'&gt;
         &lt;li&gt;&lt;img src='parrot.png'/&gt;&lt;/li&gt;
         &lt;li class='${ownerID}'&gt;22&lt;/li&gt;
         &lt;li class='${Status}'&gt;Checked In&lt;/li&gt;
      &lt;/ul&gt;    
      &lt;ul class='Finch'&gt;
         &lt;li&gt;&lt;img src='finch.png'/&gt;&lt;/li&gt;
         &lt;li class='${ownerID}'&gt;31&lt;/li&gt;
         &lt;li class='${Status}'&gt;Checked In&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm returning the data like so:</p>
  
  <pre><code>function getAnimalData() {
  let url = "php/getAnimalData.php";
  fetch(url)
      .then((res) =&gt; res.json())
      .then((data) =&gt; {
          for (const [key, value] of Object.entries(data)) {
              byID('container').insertAdjacentHTML('afterend', 
              `&lt;div class="${value['animal']}"&gt;
                &lt;ul class="${value['breed']}"&gt;
                 &lt;li class="${value['image']}"&gt;&lt;/li&gt;
                 &lt;li class="${value['owner']}"&gt;&lt;/li&gt;
                 &lt;li class="${value['status']}"&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;`);
          }
      }).catch(err =&gt; {
          return Promise.reject(err.message);
      });
  }
  </code></pre>
  
  <p>As you can tell this doesn't filter unique animal and creates a div for each animal with each breed beneath it. I have attempted a few solutions on stackoverflow (<a href="https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates?page=1&amp;tab=votes#tab-top">1 for example</a>) - most of which involve creating an array of distinct animal names then looping through that to create the multiple ul elements and then append the li by again looping over an array of unique breeds and appending appropriately. Unfortunately, I haven't found a solution that works and anything that comes close to working is using jQuery, knockout, etc (i'd very much like not to use jQuery).</p>
  
  <p>I'm open to suggestions on how to achieve this using Vanilla JavaScript - or is this a case of going back to the drawing board and formatting the JSON data differently.</p>