添加对象数组以形成对象 [英] add object array to form object

问题描述

我有这样的HTML表单:

I have a html form like this:

<form action="/create" method="POST">

    <input type="text" placeholder="title" name="title">
    <input type="text" placeholder="year" name="toYear">
    <input type="text" placeholder="genre" name="genre">
    <input type="text" placeholder="director" name="director">    
    <input type="url" placeholder="poster" name="poster">
    <textarea name="plot" placeholder="plot..." cols="30" rows="10"></textarea>            

    <div id="actors">
        <h5>Actors</h5>
        <button type="button" id="addActor">Add Actor</button>
    </div>

    <div id="ratings">
        <h5>Ratings</h5>
        <button type="button" id="addRating">Add Rating</button>
    </div>
<button type="submit">Add to Collection
</button>
</form>

下面是我的脚本:

document.getElementById('addRating').addEventListener('click', function () {

    var ratingsElem = document.getElementById('ratings');

    var sourceElem = document.createElement("input");
    sourceElem.setAttribute('type', 'text');
    sourceElem.setAttribute('placeholder', 'Source');
    sourceElem.setAttribute('name', 'ratingsSource');

    var valueElem = document.createElement("input");
    valueElem.setAttribute('type', 'text');
    valueElem.setAttribute('placeholder', 'value');
    valueElem.setAttribute('name', 'ratingsValue');


    ratingsElem.appendChild(sourceElem);
    ratingsElem.appendChild(valueElem);

})

document.getElementById('addActor').addEventListener('click', function () {

    var ActorsElem = document.getElementById('actors');

    var actorElem = document.createElement("input");
    actorElem.setAttribute('type', 'text');
    actorElem.setAttribute('placeholder', 'Name');
    actorElem.setAttribute('name', 'actors');

    ActorsElem.appendChild(actorElem);
});

提交时一切都很好，但我想将Ratings值制作成如下这样的评价对象数组:

Everything goes well on submit but I want to make the Ratings values into an array of rating objects like this:

"Ratings": [
{
  "Source": "Internet Movie Database",
  "Value": "8.8/10"
},
{
  "Source": "Rotten Tomatoes",
  "Value": "91%"
},
{
  "Source": "Metacritic",
  "Value": "92/100"
}
  ]

并将其附加到发送到服务器的表单数据中.我该如何实现?........................................

and append it to form data sent to server. How may I achieve this? ........................................

推荐答案

可以完成的方法很少，但这是最简单的方法

There is few ways this can be done, but here is the simpliest one

var rating = 0;

document.getElementById('addRating').addEventListener('click', function () {
  var ratingsElem = document.getElementById('ratings');

  var sourceElem = document.createElement("input");
  sourceElem.setAttribute('type', 'text');
  sourceElem.setAttribute('placeholder', 'Source');
  sourceElem.setAttribute('name', 'Ratings[' + rating + '][Source]');

  var valueElem = document.createElement("input");
  valueElem.setAttribute('type', 'text');
  valueElem.setAttribute('placeholder', 'value');
  valueElem.setAttribute('name', 'Ratings[' + rating +  '][Value]');

  ratingsElem.appendChild(sourceElem);
  ratingsElem.appendChild(valueElem);

 rating++;

});

如果您想在不添加变量 rating 的情况下执行此操作，则在源的每个新输入上，您都可以计算其索引，然后添加具有相同索引的输入值...

If you want to do it without adding variable rating, on each new input for source you can calculate his index and than add input value with same index...

我希望这会有所帮助...

I hope this was helpful...

我测试时输出以下内容:

Here is output when I tested:

{
  "title": "",
  "toYear": "",
  "genre": "",
  "director": "",
  "poster": "",
  "plot": "",
  "Ratings": [
    {
      "Source": "1",
      "Value": "2"
    },
    {
      "Source": "2",
      "Value": "3"
    }
  ]
}

这篇关于添加对象数组以形成对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！