Iterate JSON data with JavaScript to build alphabetical list
<p>My JavaScript app receives JSON data from my backend PHP app.  I need to create a page that list all my Tag records sorted into list by alphabet letter that the tag title starts with.</p>

<p><a href="https://i.stack.imgur.com/7f9vv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7f9vv.png" alt="enter image description here"></a></p>

<p>I have my PHP returning JSON in the format of each letter and under each letter I have my tag records which start with that letter like this:</p>

<pre><code>{
   "A":[

   ],
   "B":[

   ],
   "C":[
      {
         "id":"3",
         "title":"CSS",
         "description":""
      },
      {
         "id":"6",
         "title":"CSS3",
         "description":"CSS3 description"
      }
   ],
   "D":[

   ],
   "E":[

   ],
   "F":[

   ],
   "G":[

   ],
   "H":[

   ],
   "I":[

   ],
   "J":[
      {
         "id":"2",
         "title":"JavaScript",
         "description":""
      }
   ],
   "K":[

   ],
   "L":[
      {
         "id":"4",
         "title":"Laravel",
         "description":""
      }
   ],
   "M":[

   ],
   "N":[

   ],
   "O":[

   ],
   "P":[
      {
         "id":"1",
         "title":"PHP",
         "description":""
      }
   ],
   "Q":[

   ],
   "R":[

   ],
   "S":[

   ],
   "T":[

   ],
   "U":[

   ],
   "V":[

   ],
   "W":[

   ],
   "X":[

   ],
   "Y":[

   ],
   "Z":[

   ]
}
</code></pre>

<hr>

<p>Based on my JSON data above, how can I iterate that and build HTML with a Letter heading for each letter and an <code>&lt;ul&gt;</code> list under each letter listing the tags under that letter?</p>