title: Populate drop-down list in HTML using JSON data
body: <p>I'm a student and very new to code. I've created a drop-down list using HTML and CSS, and I'm trying to populate it using data from JSON. This is my HTML code: </p>
  
  <pre><code>    &lt;div class="dropdown"&gt;
    &lt;button class="dropbtn"&gt;Choose your area&lt;/button&gt;
    &lt;div class="dropdown-content"&gt;
      &lt;a href="#"&gt;Place 1&lt;/a&gt;
      &lt;a href="#"&gt;Place 2&lt;/a&gt;
      &lt;a href="#"&gt;Place 3&lt;/a&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to replace 'Place 1', 'Place 2' etc with about 150 real place names. These are in JSON: </p>
  
  <pre><code>    "areaNames": [
   {
     "A": 1,
     "B": "Barking &amp; Dagenham"
   },
   {
     "A": 2,
     "B": "Barnet"
   },
  </code></pre>
  
  <p>and so on. How do I pull in the place names from JSON to be in the place of  'Place 1', 'Place 2' etc? I've tried following the advice in response to similar tutorials but that seems to give me a list of several separate drop-down boxes rather than a simple list of places. </p>
  
  <p>Thanks for your help. </p>