Мне нужно напечатать массив карт в раскрывающемся списке HTML, я получил код карты следующим образом:

var myMap = new Map(),
    select = document.getElementById('students');

myMap.set("Zane", 45);
myMap.set("Jane", 50);
myMap.set("Rumi", 100);
myMap.set("Ken", 70);
myMap.set("Jake", 37)

Теперь мне нужно распечатать его в раскрывающемся списке, и я не уверен, как,

Мой HTML имеет {{Х0}}

Но как мне заполнить его как цикл, как

for (name in myMap) {
  select.add(new Option(myMap[name]));
};

Не делал пока что работает для обычного массива

0
Mark Rubbinson 30 Апр 2019 в 16:26

4 ответа

Лучший ответ

Вы можете использовать карту forEach, чтобы итерировать, а затем шаблонные литералы, чтобы создать опцию

var myMap = new Map(),
  select = document.getElementById('students');
myMap.set("Zane", 45);
myMap.set("Jane", 50);
myMap.set("Rumi", 100);
myMap.set("Ken", 70);
myMap.set("Jake", 37);

let str = '';
myMap.forEach((key, val) => {
  str += `<option value='${key}'>${val}</option>`

});
select.innerHTML = str;
<select id='students'></select>
0
brk 30 Апр 2019 в 13:56

Как было отмечено в комментариях, карта, возможно, не является правильной структурой данных для этого. Возможно, вам лучше использовать массив.

Тем не менее, вы можете перебрать карту, используя forEach(...):

myMap.forEach((key, value) => {
  select.add(new Option(value, key));
});

Даст вам:

<select id="students">
  <option value="45">Zane</option>
  <option value="50">Jane</option>
  <option value="100">Rumi</option>
  <option value="70">Ken</option>
  <option value="37">Jake</option>
</select>
-1
James Hibbard 30 Апр 2019 в 14:23

Вы можете использовать myMap.entries() для получения массива [key, value] и использовать его для создания выпадающего списка:

var select = document.getElementById('students');
var myMap = new Map();
myMap.set("Zane", 45);
myMap.set("Jane", 50);
myMap.set("Rumi", 100);
myMap.set("Ken", 70);
myMap.set("Jake", 37);
var html = '';
for (const entry of myMap.entries()) {
  html += '<option value="' + entry[1] + '">' + entry[0] + '</option>';
}
select.innerHTML = html;
<select id="students"></select>
0
Ankit Agarwal 30 Апр 2019 в 13:37

Вы можете использовать {{X0 }} или вы можете использовать Map.prototype​.for​Each() для просмотра Map

var myMap = new Map(),
    select = document.getElementById('names');

myMap.set("Zane", 45);
myMap.set("Jane", 50);
myMap.set("Rumi", 100);
myMap.set("Ken", 70);
myMap.set("Jake", 37)

myMap.forEach((value, key) => {
  select.add(new Option(key, value) )
})

/*
// This also works
for (let entry of myMap) {
  select.add(new Option(entry[0], entry[1]) )
};
*/
<select id="names"> </select>
0
adiga 30 Апр 2019 в 13:43