在服务器端将隐藏值数据作为数组发送时出现错误

Question

我正在使用把手作为模板引擎，并且是把手的新手。我从API（edamam配方搜索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]出现错误。

Answer 1

使用模板引擎传递的数据是直接对象，例如{{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}}"/>来将值属性与其实际值（即“ {{this.recipe。

Answer 2

实际上说您的代码按预期工作。在将JAVASCRIPT对象（this.recipe.ingredients）放在隐藏字段中时，我们需要将该JAVASCRIPT对象转换为字符串值，以便将其作为FORM数据提交。要进行转换，您需要创建并注册如下所示的把手助手Handlebars.registerHelper('json', function(context) {&nbsp; &nbsp; return JSON.stringify(context);});另外，您需要在如下所示的适当位置使用该帮助程序。<input type="hidden" name="recIngredients" value="{{json this.recipe.ingredients}}"/>顺便说一句，如果将隐藏字段设置为文本字段，则可以轻松找到问题（我希望）。