@Amourezel

По какой причине данные из объекта не вписываются в шаблон и вместо них ставится undefined?

const menuField = document.querySelector('.menu__field .container'),
        menuList = {};

  class MenuCard {
    constructor(imageURL, menuTitle, menuText, menuPrice) {
      this.imageURL = imageURL;
      this.menuTitle = menuTitle;
      this.menuText = menuText;
      this.menuPrice = menuPrice;
    }
  }

  menuList.fitness = new MenuCard('img/tabs/vegy.jpg', 'Меню "Фитнес"', 'Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Продукт активных и здоровых людей. Это абсолютно новый продукт с оптимальной ценой и высоким качеством!', 229);
  menuList.premium = new MenuCard('img/tabs/elite.jpg', 'Меню “Премиум”', 'В меню “Премиум” мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!', 550);
  menuList.lenten = new MenuCard('img/tabs/post.jpg', 'Меню "Постное"', 'Меню “Постное” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения, молоко из миндаля, овса, кокоса или гречки, правильное количество белков за счет тофу и импортных вегетарианских стейков.', 430);

  console.log(menuList.fitness.imageURL);

  function generateCards() {
    for (let menuItem in menuList) {
      console.log(menuItem.menuText);
      menuField.innerHTML += `
      <div class="menu__item">
        <img src="${menuItem.imageURL}" alt="image">
        <h3 class="menu__item-subtitle">${menuItem.menuTitle}</h3>
        <div class="menu__item-descr">${menuItem.menuText}</div>
        <div class="menu__item-divider"></div>
        <div class="menu__item-price">
          <div class="menu__item-cost"> Цена: </div>
          <div class="menu__item-total">
            <span>${menuItem.menuPrice}</span></span> грн/день
          </div>
        </div>
      </div>
    `;
    }
  }

  generateCards();

6152e3883e58f442817963.png
Пожалуйста, помогите понять в чем проблема.
  • Вопрос задан
  • 95 просмотров
Решения вопроса 2
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
А Вы читали как работает цикл for in перед тем как им пользоваться?
https://developer.mozilla.org/ru/docs/Web/JavaScri...

menuItem- не объект, а название свойства в исходном объекте.
То есть не menuItem.imageURL, а menuList[menuItem].imageURL

P.s. поставить debuggerперед строкой
debugger;
console.log(menuItem.menuText);

и посмотреть в отладчике что хранится в переменной menuItem - быстрее и проще чем задать вопрос на форуме, при этом не тратит время других людей.
Ответ написан
@ikutin666
нужно использовать
menuList[menuItem}.menuPrice
menuItem название свойства а не само свойство
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы