从输入创建JSON

Question

How can I create a javascript JSON (?) object based on two input fields per row, with 48 rows?

I have this:

<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>
...
...

I then want to sort the object on rating (desc). Can this be done?

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>

What's happening is that you have an array of objects . You loop through each object within the array to get its data. You then create and append a new div with the values to the <div id="containerofPlayers"></div> element.

Hope this helps.

Edit: If you don't want to create the <div> elements in jQuery but simply assign the text, you could do this instead:

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

---

Edited answer:

Since you've changed your original question,

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

do something more like ↓

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

then in 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

Would this help?

 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 is your sorted array of arrays and divs is a jquery object containing your target divs you want to put the values in. Maybe they can all be found in an enclosing container? In that case you can use a different selector for finding them.

Edit: (answer to edited question)

To collect the data from your input fields you could do the following:

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

You can try my way:

1. Put all row to 1 form with unique name per input.
2. Get form data via jquery.
3. Use my formObj2Json() function convert form data to json with key per item is input unique name.

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