从输入创建JSON

Question

如何基于每行两个输入字段（共48行）创建javascript JSON（？）对象？

我有这个：

<div><input name = "name" /></div> <div><input name = "rating" /></div>
<div><input name = "name" /></div> <div><input name = "rating" /></div>
<div><input name = "name" /></div> <div><input name = "rating" /></div>
...
...

然后，我想按等级（desc）对对象进行排序。 能做到吗？

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  $(function() {
    var players = [{ name: "Paul", rank: 1}, {name: "Michael", rank: 2}];

    $.each(players, function(key, value){ 
      $("#containerofPlayers").append('<div id="' + value.name + '">' + value.name + ' is ranked ' + value.rank + '</div>');
    });
  });
</script>

发生的事情是您有一个对象数组 。 您遍历数组中的每个对象以获取其数据。 然后，您将带有值的新div附加到<div id="containerofPlayers"></div>元素上。

希望这可以帮助。

编辑：如果您不想在jQuery中创建<div>元素，而只是分配文本，则可以改为：

$('#'+value.name).text(value.name + " is ranked " + value.rank);

---

编辑答案：

既然您更改了原始问题，

<div><input name="name" /></div> <div><input name = "rating" /></div>

做更多像↓

<div id="players">
    <div class="player">
        <label>Name: </label><input class="playerName" type="text"/>
        <label>Rank: </label><input class="playerRank" type="number"/>
    </div>
    <div class="player">
        <label>Name: </label><input class="playerName" type="text"/>
        <label>Rank: </label><input class="playerRank" type="number"/>
    </div>
</div>

然后在jQuery中

$(function() {
  var players = []; //create an Array
  $("#players .player").each(function(i, obj){
    var playerName = $(this).children('.playerName').val();
    var playerRank = $(this).children('.playerRank').val();
    $(this).push({"name": playerName, "rank": playerRank}); // this will give you an array of objects like in my previous answer, then you can use that data to display it.
  });

  players.sort(function(a, b) { 
    return (a.rank - b.rank) || a.name.localeCompare(b.name); 
  });

  $.each(players, function(index, value){
      $("#result").append('<div id="' + value.name + '">' + value.name + ' is ranked ' + value.rank + '</div>');
  })
});

Answer 2

这会有所帮助吗？

 var pl=[['Jack',1],['Jill',2],['Lucy',3],['Marc',4],['John',5],['Eva',6],['Anne',7],['Ben',8]]; divs=$('div[id^=NAME]'); pl.forEach(function(v,i){divs[i].innerHTML=v[0]+' (rank: '+v[1]+')';}) 

 div {display: inline-block; width:120px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="NAME-1"></div> vs. <div id="NAME-2"></div><br/> <div id="NAME-3"></div> vs. <div id="NAME-4"></div><br/> <div id="NAME-5"></div> vs. <div id="NAME-6"></div><br/> <div id="NAME-7"></div> vs. <div id="NAME-8"></div><br/> <div id="NAME-9"></div> vs. <div id="NAME-10"></div><br/> <div id="NAME-11"></div> vs. <div id="NAME-12"></div><br/> <div id="NAME-13"></div> vs. <div id="NAME-14"></div><br/> <div id="NAME-15"></div> vs. <div id="NAME-16"></div><br/> <div id="NAME-17"></div> vs. <div id="NAME-18"></div><br/> <div id="NAME-19"></div> vs. <div id="NAME-20"></div><br/> <div id="NAME-21"></div> vs. <div id="NAME-22"></div><br/> <div id="NAME-23"></div> vs. <div id="NAME-24"></div><br/> <div id="NAME-25"></div> vs. <div id="NAME-26"></div> 

pl是数组的排序数组，而divs是包含要放入值的目标div的jquery对象。也许可以在封闭的容器中找到它们？ 在这种情况下，您可以使用其他选择器来查找它们。

编辑：（已编辑问题的答案）

要从输入字段中收集数据，可以执行以下操作：

 $(function(){ var i,str=''; for (var i=1;i<11;i++) str+='<input type="text" name="n'+i+'" placeholder="Name '+i+'"/> ' +'<input type="text" name="r'+i+'" placeholder="Rating '+i+'"/><br/>'; $('#frm1').prepend(str); $('#go').click(go); }) function go(){ var name, jsn=$.makeArray($('input','#frm1').map(function(i,o){ var v=$(o).val(); if (i%2 && v>0) return [[name,v]]; else name=v;})); jsn.sort(function(a,b){ return a[1]-b[1];}); $('#result').text(JSON.stringify(jsn)); return false; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="frm1"><button id="go">go</button></form> <pre id="result"></pre> 

Answer 3

您可以尝试我的方式：

1. 将所有行设置为1形式，每个输入具有唯一的名称。
2. 通过jQuery获取表单数据。
3. 使用我的formObj2Json()函数将表单数据转换为json，并且每一项的键都是唯一的名称。

 $(function(){ $(document).on('click', '#grap', function(){ var formData = $('#anph').serializeArray(), rs = formObj2Json(formData); $('#rs').html(JSON.stringify(rs, undefined, 2)); }); }) function formObj2Json(formArray) { //serialize data function var returnArray = {}; for (var i = 0, len = formArray.length; i < len; i++) returnArray[formArray[i].name] = formArray[i].value; return returnArray; } 

 <!DOCTYPE html> <html> <head> <meta name="description" content="Knockout 1"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <button id="grap">grap</button> <form id="anph"> <div class="group"><input name="name1" /><input name="rating1" /></div> <div class="group"><input name="name2" /><input name="rating2" /></div> <div class="group"><input name="name3" /><input name="rating3" /></div> <div class="group"><input name="name4" /><input name="rating4" /></div> <div class="group"><input name="name5" /><input name="rating5" /></div> <div class="group"><input name="name6" /><input name="rating6" /></div> <div class="group"><input name="name7" /><input name="rating7" /></div> <div class="group"><input name="name8" /><input name="rating8" /></div> <div class="group"><input name="name9" /><input name="rating9" /></div> <div class="group"><input name="name10" /><input name="rating10" /></div> </form> <pre id="rs"></pre> <script src="https://code.jquery.com/jquery-1.7.2.js"></script> </body> </html>