Как создать список <option>записей из файла. json с помощью vanilla JS?

Question

Мне нужно создать список записей формы HTML из файла. json, содержащего ключ и значение. Нет проблем с загрузкой файла и так далее. Целый день боролся с петлями, но вроде ничего не работает. Это часть моего. json файла:

{
"City": "0",
"Another City": "1",
"Yet Another City": "2",
(...)
}

И это то, чего я хотел бы достичь в HTML (добавить параметры через внутренний HTML например):

<option id="0">City</option>
<option id="1">Another City</option>
<option id="2">Yet Another City</option>
(...)

Я пробовал циклы и использовал Object.keys (ObjectVariableName) [0] , но не мог заставить его работать. Буду признателен за вашу помощь.

Answer 1

Вам нужно создать option элементы, установить для каждого text и value, а затем добавить их в select:

let obj = {
"City": "0",
"Another City": "1",
"Yet Another City": "2",
}
let select = document.getElementById("myList");
for (var key in obj) {
     var option = document.createElement("option");
     option.text = key;
     option.value = obj[key];
     select.add(option);
}
console.log(select.innerHTML);

<select id="myList"></select>

Answer 2

используйте методы add () и new option ()

const  mySelect = document.getElementById('my-select')
  ,    data = 
        { 'City': '0'
        , 'Another City': '1'
        , 'Yet Another City': '2'
        }
  ;
for (const [key, value] of Object.entries(data))
  {
  mySelect.add(new Option(key, value))     
  }

console.log(mySelect.innerHTML);

<select name="xxx" id="my-select"></select>