Блог

Я использую Handlebars в качестве движка для создания шаблонов и являюсь новичком в handlebars. Я передал данные из API (edamam recipe search api). При попытке отправить обратно массив ингредиентов, прикрепленных к каждой карточке рецепта, используя скрытое значение в форме, я получаю сообщение об ошибке на стороне сервера. Консоль показывает

[объект объекта],[объект объекта],[объект объекта],[объект объекта],[объект объекта],[объект объекта] [объект объекта],[объект объекта],[объект объекта],[объект объекта],[объект объекта],[объект объекта]

при попытке выйти из системы на стороне сервера. Не уверен, что происходит. Код ниже:

 <div class="container">
  <header class="jumbotron">
    <div class=container></div>
    <h1>{{currentUser.username}}</h1>
    <h1>Press save to add the recipes to your dashboard</h1>
    <p>
      <a class="btn btn-primary btn-large" href="/{{currentUser.username}}/recipes/dashboard">Go To Your Dashboard</a>
    </p>
  </header>

  <div class="row text-center" style="display:flex; flex-wrap:wrap">
    {{#each data}}
    <div class="col-md-3 col-sm-6">
      <div class="thumbnail">
        <img src="{{recipe.image}}" alt="Recipe Pic">
        <div class="caption">
          <h4>
            {{recipe.label}}
          </h4>
          <h5>
            Ingredients
          </h5>

{{!-- recipe.ingredients is an array of ingredient objects with text as a key --}}

          {{#each recipe.ingredients}} 
          <p>{{text}}</p>
          {{/each}}
        </div>
        <p>
         <form id="buttonDesign" action="/recipes/dashboard" method="POST">
         <input type="hidden" name="recName" value="{{this.recipe.label}}"/>
         <input type="hidden" name="recImage" value="{{this.recipe.image}}"/>
         <input type="hidden" name="recUrl" value="{{this.recipe.url}}"/>
         <input type="hidden" name="recIngredients" value "{{this.recipe.ingredients}}"/>
            <button class="btn btn-primary">Save</button>
          </form>
        </p>
      </div>
    </div>
   {{/each}}
  </div>
</div>
</div>
  

Как упоминалось выше, когда я выхожу из req.body.recIngredients на стороне сервера, я получаю [object, Object] ошибку.

Данные, которые вы передаете с помощью вашего движка шаблонов, являются прямыми объектами, например {{this.recipe.ingredients}} поэтому, когда этот объект «this.recipe.ingredients» преобразуется в строку, это преобразуется в «[[Object object]]», который является строковым ответом по умолчанию, предоставляемым методом Object#toString(). Что вам нужно сделать, это сначала преобразовать ваши объекты в строку, а затем присвоить это значениям атрибутов html-элемента. Для преобразования вы можете использовать «JSON.stringify(this.recipe.ingredients)», который преобразует весь ваш объект в строку в формате JSON. Я не знаю о «механизме создания шаблонов Handlebars», но это должно сработать: {{JSON.stringify(this.recipe.ingredients)}}. И да, вы забыли поставить «=» <input type="hidden" name="recIngredients" value "{{this.recipe.ingredients}}"/> , чтобы связать атрибут value с его реальным значением, которое является «{{this.recipe.ingredients}}».

На самом деле говорю, что ваш код работает так, как ожидалось. Поскольку мы помещаем объект JAVASCRIPT ( this.recipe.ingredients ) в скрытое поле, нам нужно преобразовать этот объект JAVASCRIPT в строковое значение, чтобы отправить его в виде данных ФОРМЫ.

Чтобы выполнить преобразование, вам необходимо создать и зарегистрировать помощник handlebars, как показано ниже

 Handlebars.registerHelper('json', function(context) {
    return JSON.stringify(context);
});
  

Также вам нужно использовать этот помощник в соответствующем месте, как показано ниже.

 <input type="hidden" name="recIngredients" value="{{json this.recipe.ingredients}}"/>
  

Кстати, если вы создадите скрытое поле в виде текстового поля, вы могли бы легко найти проблемы (я надеюсь).

Пожалуйста, подтвердите, работает это у вас или нет 🙂