Я получаю сообщение об ошибке при отправке скрытых данных в виде массива на стороне сервера - PullRequest
Новая
       45

Я получаю сообщение об ошибке при отправке скрытых данных в виде массива на стороне сервера

1 голос
/ 28 марта 2019

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

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

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

<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] ошибку.

Ответы [ 2 ]

1 голос
/ 28 марта 2019

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

0 голосов
/ 28 марта 2019

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

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

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

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

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

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

Пожалуйста, подтвердите, что это работает или не для вас:)

...