【问题标题】：create JSON from inputs从输入创建 JSON
【发布时间】：2017-09-06 03:13:36
【问题描述】：

如何根据每行两个输入字段（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) 对对象进行排序。这个可以吗？

【问题讨论】：

标签： javascript jquery arrays json object

【解决方案1】：

这会有帮助吗？

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 是一个 jquery 对象，其中包含您要放入值的目标 div。也许它们都可以在封闭容器中找到？在这种情况下，您可以使用不同的选择器来查找它们。

编辑：（对已编辑问题的回答）

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

$(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>

【讨论】：

好吧，如果“它没有有帮助”，为什么不直接告诉我呢？为什么投反对票？

【解决方案2】：

你可以试试我的方法：

将所有行放入 1 个表单中，每个输入具有唯一名称。
通过 jquery 获取表单数据。
使用我的 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>

【讨论】：

【解决方案3】：

<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>');
  })
});

【讨论】：

请注意，Rating 输入字段可以简化操作。没有更多的代码查找巫毒。更简单的方法更清洁更好，恕我直言。
我更改了列表的格式。明智直接的代码是我的目标。我在两个相关的输入字段中添加了 name = "name" 和 name = "rating"。希望有人可以帮助我。
我越来越深入。我将重新编辑问题。
@verlager 我已经编辑了我的答案，如果有帮助请告诉我。
这看起来很有希望。但是我怎么称呼这段代码呢？我需要一个按钮来生成数组的列表代码。我该怎么做？