I am currently learning how to use Handlebars as my templating engine and encountering an issue with passing over data from an API (specifically the Edamam recipe search API). I am trying to send back the array of ingredients attached to each recipe card using a hidden value in the form, but I am getting an error on the server side. The console displays:
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] [object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
When attempting to log it out on the server side, I am unsure of what is causing this issue. Below is the code snippet:
<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>
Upon logging out req.body.recIngredients on the server side, I receive an error stating [object, Object].