Как генерировать несколько элементов li?

Question

[Aristotel Paskalov]

Я решил разработать игру "кликер" на JS, в качестве практики.
Для этого мне пришлось написать небольшой плагин для модальных окон, в следствии с чего я столкнулся с следующей проблемой.

У меня есть функция, которая создаёт HTML код с модальным окном:

function createModal(options) {
    const modal = document.createElement("div");
    modal.classList.add("modal");
    modal.insertAdjacentHTML("afterbegin", `
        <div class="modal__body">
            <div class="modal__header">
                <p class="modal__title">${options.header}</p>
                <div class="modal__close" onclick="modalClose()">X</div>
            </div>
            <div class="modal__body">
                <ul class="modal__list">
                    <li class="modal__item item">
                        <div class="item__column">
                            <img src="${options.items.item1.img}" alt="Image">
                            <div class="modal__text">
                                <p class="modal__name">${options.items.item1.name}</p>
                                <p class="modal__gainer">+ ${options.items.item1.perClick} за клик</p>
                            </div>
                        </div>
                        <div class="item__column">
                            <button class="modal__button">${options.items.item1.cost}</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    `);

    document.body.appendChild(modal);
}

Эта функция берёт некоторые данные из объекта options, вот он:

const options = {
    header: "Изучение языков",
    items: {
        item1: {img: "img/languages/pascal.png", name: "Pascal", perClick: 0, cost: "Куплено"},
        item2: {img: "img/languages/visual-basic.png", name: "Visual Basic", perClick: 2, cost: 900},
        item3: {img: "img/languages/html.png", name: "HTML", perClick: 5, cost: 5100},
        item4: {img: "img/languages/css.png", name: "CSS", perClick: 12, cost: 31000},
        item5: {img: "img/languages/php.png", name: "PHP", perClick: 25, cost: 90000},
        item6: {img: "img/languages/javascript.png", name: "Javascript", perClick: 100, cost: 380000},
        item7: {img: "img/languages/c++.png", name: "C++", perClick: 224, cost: 970000},
        item8: {img: "img/languages/delphi.png", name: "Delphi", perClick: 700, cost: 5000000},
        item9: {img: "img/languages/python.png", name: "Python", perClick: 1680, cost: 12000000},
        item10: {img: "img/languages/java.png", name: "Java", perClick: 3640, cost: 59000000}
    }
};

Но получается так, что данная функция генерирует всего-лишь 1 элемент li, и берёт данные из options.items.item1.
Как можно генерировать столько li, сколько имеется в options.items?

upd. Также прошу критику насчёт этого кода, насколько он валидный, что можно было бы изменить?

Answer 1

[Tim]

Answer 2

[Simkav]

Сделайте функцию которая создаёт li элемент, и запускайте её для каждого item'a, по поводу критики, не совсем понятно почему начали создавать через createelement,classlist и после этого литерально добавляете код, определитесь и делайте одинаково

Answer 3

[0Bannon]

что-то типа того, думаю сам разберешься.

const options = {
  header: "Изучение языков",
  items: {
      item1: {img: "img/languages/pascal.png", name: "Pascal", perClick: 0, cost: "Куплено"},
      item2: {img: "img/languages/visual-basic.png", name: "Visual Basic", perClick: 2, cost: 900},
      item3: {img: "img/languages/html.png", name: "HTML", perClick: 5, cost: 5100},
      item4: {img: "img/languages/css.png", name: "CSS", perClick: 12, cost: 31000},
      item5: {img: "img/languages/php.png", name: "PHP", perClick: 25, cost: 90000},
      item6: {img: "img/languages/javascript.png", name: "Javascript", perClick: 100, cost: 380000},
      item7: {img: "img/languages/c++.png", name: "C++", perClick: 224, cost: 970000},
      item8: {img: "img/languages/delphi.png", name: "Delphi", perClick: 700, cost: 5000000},
      item9: {img: "img/languages/python.png", name: "Python", perClick: 1680, cost: 12000000},
      item10: {img: "img/languages/java.png", name: "Java", perClick: 3640, cost: 59000000}
  }
};



const app = document.createElement("div");

function createLi(options){
  let context = '';
  for (const value of Object.values(options.items)) 
  { 
    context += `<li>${value.name}</li>`;
  }

  return context;
}

app.innerHTML = createLi(options);

И еще "${options.items.item1.img}" должен быть шаблонный литерал `${options.items.item1.img}` обрати внимание на кавычки обратные.