for in loop not populating dropdown list

I'm trying to make a site that shows a select box, and when you select the right character, it shows the pic of that character. In the future, I will fetch a large JSON file with the formatting below, but I'm doing things by little since I'm still learning.

I learned that the for...in loop should get the values from each property, but they're returning as 'undefined'. Why is that the case and how can I fix it?

<!DOCTYPE html>
<html>

  <head>
    <title>Add Option From Array</title>
    <meta charset="windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>

    <select id="select" onchange="switchImage();"></select>


    <img src="https://abimon.org/dr/busts/aoi/00.png" id="charImg" alt="blank" />

    <script>
      var imageList = new Array();
      
      imageList[0] = new Image();
      imageList[0].src = "https://abimon.org/dr/busts/aoi/00.png";
      imageList[1] = new Image;
      imageList[1].src = "https://abimon.org/dr/busts/akane/00.png";
      imageList[2] = new Image;
      imageList[2].src = "https://ik.imagekit.io/drrp/sprites/angie/00.png";
      
      var select = document.getElementById("select"),
      
      drnames = '{"aoi": "Aoi Asahina", "akane": "Akane Owari", "angie": "Angie Yonaga"}',
      
      arr,
      
      i = 0;

      for (var x in drnames){
        arr[i] = drnames[x];
        i++;
        console.log(arr[i]);
      }
      
        /*arr = ["Aoi Asahina", "Akane Owari", "Angie Yonaga"];*/


      for (var i = 0; i < arr.length; i++) {
        var option = document.createElement("OPTION"),
          txt = document.createTextNode(arr[i]);
        option.appendChild(txt);
        option.setAttribute("value", arr[i]);
        select.appendChild(option);
        
      }

      function switchImage() {
        var index = document.getElementById("select").selectedIndex;
          charImg = document.getElementById("charImg");
        charImg.src = imageList[index].src;
      }

    </script>

  </body>

</html>

Solution

I was just picking up my doner - here is the missing explanation:

You had assigned a string and not an object to drnames
the array arr had not been initialised to be an array.

<!DOCTYPE html>
<html>

  <head>
    <title>Add Option From Array</title>
    <meta charset="windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>

    <select id="select" onchange="switchImage();"></select>


    <img src="https://abimon.org/dr/busts/aoi/00.png" id="charImg" alt="blank" />

    <script>
      var imageList = new Array();
      
      imageList[0] = new Image();
      imageList[0].src = "https://abimon.org/dr/busts/aoi/00.png";
      imageList[1] = new Image;
      imageList[1].src = "https://abimon.org/dr/busts/akane/00.png";
      imageList[2] = new Image;
      imageList[2].src = "https://ik.imagekit.io/drrp/sprites/angie/00.png";
      
      var select = document.getElementById("select"),
      
      drnames = {"aoi": "Aoi Asahina", "akane": "Akane Owari", "angie": "Angie Yonaga"},
      
      arr=[],
      
      i = 0;

      for (var x in drnames){
        arr[i] = drnames[x];
        console.log(arr[i]);
        i++;
      }
      
        /*arr = ["Aoi Asahina", "Akane Owari", "Angie Yonaga"];*/


      for (var i = 0; i < arr.length; i++) {
        var option = document.createElement("OPTION"),
          txt = document.createTextNode(arr[i]);
        option.appendChild(txt);
        option.setAttribute("value", arr[i]);
        select.appendChild(option);
        
      }

      function switchImage() {
        var index = document.getElementById("select").selectedIndex;
          charImg = document.getElementById("charImg");
        charImg.src = imageList[index].src;
      }

    </script>

  </body>

</html>

Coming back to this post I realise that you can do the same job with less code:

const images =["https://abimon.org/dr/busts/aoi/00.png","https://abimon.org/dr/busts/akane/00.png","https://ik.imagekit.io/drrp/sprites/angie/00.png"],
  [sel,img]=["select","charImg"].map(id=>document.getElementById(id)),
  drnames = {"aoi": "Aoi Asahina", "akane": "Akane Owari", "angie": "Angie Yonaga"};

sel.innerHTML=Object.values(drnames).map(nam=>`<option>${nam}</option>`).join();
(sel.onchange=()=>img.src=images[sel.selectedIndex])();

#charImg {width:200px}

<select id="select"></select>
<img id="charImg">