Question

我有一个mongodb模型，如下所示：

ingredients: [
  quantity: Number,
  measurement: String,
  name: String
]

这些是通过单个表单传递的，用户可以通过单击克隆输入节点的按钮并将其附加到父节点来添加新成分。所以目前所有的name =''值都是一样的。就像现在一样，这是传递一个像这样的数组：

ingredients: [{
  quantity: ['1','2','3'],
  measurement: ['cup','tsp','tbsp'],
  name: ['rice','cumin','pepper']
}]

现在，表单输入声明名称，如name ='recipe [ingredients] [quantity]'（recipe是父对象）。如何将多个对象传递给成分字符串？

表单的相关部分：

div class='add-ingredient-form'>
              <input type='text' name='recipe.ingredients[quantity]' placeholder='1' class='form-control' style='width: 10%; display: inline-block;'></input>
              <select class='form-control' style='width: 15%; display: inline-block;' name='recipe.ingredients[measurement]'>
                <option>#</option>
                <option>tsp</option>
                <option>tbsp</option>
                <option>cup</option>
                <option>lb</option>
                <option>fl oz</option>
              </select>
              <input type='text' name='recipe.ingredients[name]' placeholder='Carrots' class='form-control' style='width: 60%; display: inline-block;'></input>
              <a class='btn btn-md btn-danger delete-ingredient-button' href='#' onclick='deleteIngredient(this)'><i class="fa fa-minus" aria-hidden="true"></i></a>
            </div>

如何在路线上创建食谱：

Recipe.create(req.body.recipe, function(err, newRecipe) {}

Answer 1

使用此格式recipe.ingredients[][name]将数据作为数组的输入命名。

当表单提交给服务器时，请求正文将包含以下格式的表单数据：

recipe {
  ingredients: [
    { quantity: Number, measurement: String, name: String },
    { quantity: Number, measurement: String, name: String },
  ]
}

实施例

$(document).ready(function() {
  $('#more_btn').on('click', function(e) {
     e.preventDefault();
     $entries = $('.add-ingredient-form');
     $entry = $entries.last();
     var clone = $entry.clone();
     var namePrefix = 'recipe.ingredients[';
     clone.find('input,select').each(function (i, el){
       el.value = '';
     });
     $entry.append(clone);
  });

  $('#submit_btn').on('click', function(e) {
     e.preventDefault();
     var form = $('#ingredient-form').serializeArray();
     console.log(form);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ingredient-form">
  <div class='add-ingredient-form'>
    <input type='text' name='recipe.ingredients[][quantity]' placeholder='1' class='form-control' style='width: 10%; display: inline-block;' />
    <select class='form-control' style='width: 15%; display: inline-block;' name='recipe.ingredients[][measurement]'>
    <option>#</option>
    <option>tsp</option>
    <option>tbsp</option>
    <option>cup</option>
    <option>lb</option>
    <option>fl oz</option>
  </select>
    <input type='text' name='recipe.ingredients[][name]' placeholder='Carrots' class='form-control' style='width: 60%; display: inline-block;' />
    <a class='btn btn-md btn-danger delete-ingredient-button' href='#' onclick='deleteIngredient(this)'><i class="fa fa-minus" aria-hidden="true"></i></a>
  </div>
  <button id="more_btn">Add Ingredient</button>
  <button id="submit_btn">Submit Form</button>
</form>

请注意：

克隆.add-ingredient-form可能需要将表单控件的值重置为默认值。

将多个节点克隆POST到对象数组

1 个答案:

实施例

请注意：