title: Populate select (drop down) with data from API after .map using vanilla JS
body: <p>I am stuck on a problem. I am using code that looks something like the following to populate a select with data but I am not getting the expected result.</p>
  <pre><code>let data = await response.json();
  let result = data.checks.map((check) =&gt; {
    return {
      name: check.name,
      tag: check.tags,
    };
  });
  let hcList = document.getElementById(&quot;hclist&quot;);
  Object.keys(result).map((key) =&gt; hcList.add(new Option(result[key], key)));
  return result;
  }
  getHcList().then((result) =&gt; console.log(result));
  </code></pre>
  <p>The select populates but looks like this <a href="https://i.stack.imgur.com/Uus3a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uus3a.png" alt="enter image description here" /></a></p>
  <p>Here is what the result data looks like in console:</p>
  <pre><code>0: {name: &quot;some name&quot;, tag: &quot;some tag&quot;}
  1: {name: &quot;some name1&quot;, tag: &quot;some tag1&quot;}
  2: {name: &quot;some name2&quot;, tag: &quot;some tag2&quot;}
  </code></pre>
  <p>I would like for just the name to populate this select. - Must use vanilla JS.</p>