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

【问题标题】：I am getting an error when sending hidden value data as array on server side在服务器端将隐藏值数据作为数组发送时出现错误
【发布时间】：2019-03-28 06:24:52
【问题描述】：

我使用 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] 错误。

【问题讨论】：

在最后一个隐藏字段中缺少 = 吗？
missing = on recIngredients 字段 -->AND--> 表单提交需要按钮类型 --->

标签： javascript express handlebars.js

【解决方案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.ingredients}}”相关联。

【讨论】：

【解决方案2】：

实际上说您的代码按预期工作。由于我们在隐藏字段中放置了一个 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}}"/>

顺便说一句，如果您将隐藏字段设置为文本字段，您可以轻松找到问题（我希望）。

请确认，这是否适合您:)

【讨论】：