Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.05.2020, 11:19
DVV DVV вне форума
Аспирант
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 97

Создание файлов с помощью PDFmaker
Есть два радиобатона (пока 2 для теста, потом будет больше). Пользователь кликает по одному из них. В соответствии с выбором из заранее сформированного JSON объекта breakfasts в объект docInfo, который обрабатывает плагин PDFmaker должны подставляться соответствующие данные, которые затем после клика по кнопке "Подтвердить выбор" и "Скачать диету" (пока файл открывается в отдельной вкладке) подставляются в PDF-файл. Для этого я пытаюсь подставить переменную mealChoice после выбора value радиобатона в строки типа breakfasts.breakfasts_1[0].variant следующим образом mealChoice.variant. Так как mealChoice, например, после выбора первого радиобатона равен breakfasts.breakfasts_1[0]. Но получаю ошибку Uncaught TypeError: Cannot read property 'variant' of undefined сразу при открытии или перезагрузке страницы.

<div class="dieta">
          <div class="first-week">
            <h1 class="first-week__title">День 1</h1>
            <div class="breakfast">Завтрак</div>
            <ul class="meals-list">
              <li class="meals__item">Творожные оладьи
                <input type="radio" name="breakfasts_1" value="breakfasts_1">
              </li>
              <li class="meals__item">Овсяноблин с творогом и бананом
                <input type="radio" name="breakfasts_1" value="breakfasts_2">
              </li>
            </ul>
          </div>
          <button class="dieta-accept" id="dieta-accept">Подтвердить выбор</button>
          <button class="dieta-download" id="dieta-download">Скачать диету</button>
        </div>


const firstWeekFirstDay = document.getElementsByName('breakfasts_1');
  const openPdf = document.getElementById('dieta-download');
  const dietaAccept = document.getElementById('dieta-accept');
  let mealChoice;

const breakfasts = {
    breakfasts_1: [
      {
        name: 'Творожные оладьи',
        variant: 'ВАРИАНТ 1',
        type: 'ЗАВТРАК',
        ingridients: [
          { first: 'Творог 2% жирности', quantaty: '120 гр' },
          { second: 'Яйцо', quantaty: '1 шт' },
          { third: 'Мука рисовая', quantaty: '40 гр' },
          { fourth: 'Банан', quantaty: '100 гр' },
        ],
      },
      {
        recipe:
          'Творог, яйцо и банан смешать в блендере до однородной текстуры (либо размять вилкой). Добавить муку, перемешать. Выпекать как обычные оладьи с двух сторон на антипригарной сковороде.',
        image: 'Картинка',
        kbzhu: '405/31/7/57',
      },
    ],
    breakfasts_2: [
      {
        name: 'Овсяноблин с творогом и бананом',
        variant: 'ВАРИАНТ 2',
        type: 'ЗАВТРАК',
        ingridients: [
          { first: 'Овсяные хлопья', quantaty: '40 гр' },
          { second: 'Яйцо ', quantaty: '1 шт' },
          { third: 'Творог 5% жирности', quantaty: '100 гр' },
          { fourth: 'Банан', quantaty: '80 гр' },
        ],
      },
      {
        recipe:
          'Овсяные хлопья измельчить в блендере (можно не измельчать, если у вас мелкие хлопья). Смешать хлопья с яйцом. Получившуюся смесь вылить на сковороду. Обжарить блинчик с двух сторон. Снять со сковороды, помазать творогом, сверху выложить банан, нарезанный кружочками. Сложить блин пополам. ',
        image: 'Картинка',
        kbzhu: '400/27/12/47',
      },
    ],
  };

 function radioCheck() {
    for (let i = 0; i < firstWeekFirstDay.length; i++) {
      if (firstWeekFirstDay[i].checked) {
        mealChoice = firstWeekFirstDay[i].value;
        mealChoice = 'breakfasts.' + mealChoice + '[0]';
      }
    }
    console.log(mealChoice);
  }

  dietaAccept.addEventListener('click', radioCheck);

let docInfo = {
    info: {
      title: 'Гибкая диета',
      author: 'BeInShape',
      subject: 'Прорамма индивидуального питания',
      keywords: 'диета, фитнес, питание',
    },
    pageSize: 'A4',
    pageOrientation: 'landscape',
    pageMargins: [55, 55, 55, 60], 

    header: function (currentPage, pageCount) {
   
      return {
        text: currentPage.toString() + 'из' + pageCount,
        alignment: 'right',
        margin: [0, 30, 10, 50],
      };
    },

    footer: [
      {
        text: 'Нижний колонтитул',
        alignment: 'center' 
      },
    ],

    content: [
      {
        style: 'header',
        type: 'none',
        ul: ['Гибкая программа', '1500 калорий', 'День 1'],
      },
      {
        table: {
          widths: [100, 150, 100, 200, '*'],
          body: [['Блюдо', 'Ингредиенты', 'Количество', 'Приготовление', 'Фото']],
        },
      },
      {
        table: {
          widths: ['*'],
          body: [
            [
              {
                text: breakfasts.breakfasts_1[0].type,
                alignment: 'center',
              },
            ],
          ],
        },
      },
      {
        table: {
          widths: ['*'],
          body: [
            [
              {
                text: breakfasts.breakfasts_1[0].variant,
              },
            ],
          ],
        },
      },
      {
        table: {
          widths: [100, 150, 100, 200, '*'],
          body: [
            [
              breakfasts.breakfasts_1[0].name,
              breakfasts.breakfasts_1[0].ingridients[0].first +
                ' \n ' +
                breakfasts.breakfasts_1[0].ingridients[1].second +
                ' \n ' +
                breakfasts.breakfasts_1[0].ingridients[2].third +
                ' \n ' +
                breakfasts.breakfasts_1[0].ingridients[3].fourth,
              breakfasts.breakfasts_1[0].ingridients[0].quantaty +
                ' \n ' +
                breakfasts.breakfasts_1[0].ingridients[1].quantaty +
                ' \n ' +
                breakfasts.breakfasts_1[0].ingridients[2].quantaty +
                ' \n ' +
                breakfasts.breakfasts_1[0].ingridients[3].quantaty,
              breakfasts.breakfasts_1[1].recipe,
              breakfasts.breakfasts_1[1].image,
            ],
          ],
        },
      },
      {
        table: {
          widths: [100, '*'],
          body: [
            [
              {
                text: 'КБЖУ',
              },
              {
                text: breakfasts.breakfasts_1[1].kbzhu,
                alignment: 'right',
              },
            ],
          ],
        },
      },
    ],
    styles: {
      header: {
        fontSize: 12,
        margin: [30, 0, 0, 10],
        listStyle: 'none',
      },
    },
  };

  openPdf.addEventListener('click', () => {
    pdfMake.createPdf(docInfo).open();
  });

Последний раз редактировалось DVV, 29.05.2020 в 11:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создание запроса с помощью функции Otokosan Общие вопросы Javascript 2 08.06.2016 13:04
Создание с помощью скрипта html элемента Anastasiya Общие вопросы Javascript 4 25.10.2011 21:28
создание файла с помощью JS Bebarr Swallow Общие вопросы Javascript 1 14.06.2011 03:57
создание файлов с помощью js по имени компьютера DIMMon Общие вопросы Javascript 2 28.10.2010 14:42
создание текстового поля с помощью javascript mrDeko Общие вопросы Javascript 2 02.09.2010 20:07