Как создать select на основе массива?

Question

[lexstile]

Есть массив объектов:

[
  { value: 'rating-desc', text: 'По рейтингу', selected: false },
  { value: 'rating-asc', text: 'По рейтингу', selected: false },
  { value: 'alphabet-asc', text: 'По алфавиту А-Я', selected: true },
  { value: 'alphabet-desc', text: 'По рейтингу Я-А', selected: false },
  { value: 'letter-asc', text: 'По количеству букв', selected: false },
  { value: 'letter-desc', text: 'По количеству букв', selected: false },
]

Как на его основе создать select?

let select = `<select>
<option value="${item.value}">${item.text}</option> // здесь маппинг по values
</select>`;
$(this).after(select); // кидаю в DOM

Answer 1

[0xD34F]

this.insertAdjacentHTML('afterend', `
  <select>${arr.map(n => `
    <option value="${n.value}" ${n.selected ? 'selected' : ''}>
      ${n.text}
    </option>`).join('')}
  </select>
`);

или

const select = document.createElement('select');
arr.forEach(n => select.appendChild(Object.assign(document.createElement('option'), n)));
this.insertAdjacentElement('afterend', select);

или

const select = document.createElement('select');
select.append(...arr.map(n => new Option(n.text, n.value, false, n.selected)));
this.after(select);

Comments

[lexstile]

Спасибо, не догадался.
Размапилось корректно, только jQuery ругается:

Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

После вызова:
$(this).after(select);

[0xD34F]

lexstile, и что вы от меня хотите? К исходному вопросу это не имеет ни малейшего отношения. Оформляйте отдельный вопрос или откройте документацию и попытайтесь сами понять, что делаете не так.