Problem:
- How can I create a javascript JSON (?) object based on two input fields per row, with 48 rows?
Solve:
- Put all row to 1 form with unique name per input.
- Get form data via jquery.
- Use my formObj2Json() function convert form data to json with key per item is input unique name.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $(function(){
$(document).on('click', '#grap', function(){
var formData = $('#anph').serializeArray(),
rs = formObj2Json(formData);
$('#rs').html(JSON.stringify(rs, undefined, 2));
});
})
function formObj2Json(formArray) {
var returnArray = {};
for (var i = 0, len = formArray.length; i < len; i++)
returnArray[formArray[i].name] = formArray[i].value;
return returnArray;
}
var formObj2Json = formArray => formArray.map(elem => {return {[elem.name]: elem.value}})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
| <!DOCTYPE html>
<html>
<head>
<meta name="description" content="Knockout 1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Anph</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
<button id="grap">grap</button>
<form id="anph">
<div class="group">
<label for="">label-1: </label>
<input type="text" name="name1" value="name1">
<input type="text" name="rating1" value="01">
</div>
<div class="group">
<label for="">label-2: </label>
<input type="text" name="name2" value="name2">
<input type="text" name="rating2" value="02">
</div>
<div class="group">
<label for="">label-3: </label>
<input type="text" name="name3" value="name3">
<input type="text" name="rating3" value="03">
</div>
<div class="group">
<label for="">label-4: </label>
<input type="text" name="name4" value="name4">
<input type="text" name="rating4" value="04">
</div>
<div class="group">
<label for="">label-5: </label>
<input type="text" name="name5" value="name5">
<input type="text" name="rating5" value="05">
</div>
<div class="group">
<label for="">label-6: </label>
<input type="text" name="name6" value="name6">
<input type="text" name="rating6" value="06">
</div>
<div class="group">
<label for="">label-7: </label>
<input type="text" name="name7" value="name7">
<input type="text" name="rating7" value="07">
</div>
<div class="group">
<label for="">label-8: </label>
<input type="text" name="name8" value="name8">
<input type="text" name="rating8" value="08">
</div>
<div class="group">
<label for="">label-9: </label>
<input type="text" name="name9" value="name9">
<input type="text" name="rating9" value="09">
</div>
<div class="group">
<label for="">label-10: </label>
<input type="text" name="name10" value="name10">
<input type="text" name="rating10" value="10">
</div>
<div class="group">
<label for="">label-11: </label>
<input type="text" name="name11" value="name11">
<input type="text" name="rating11" value="11">
</div>
<div class="group">
<label for="">label-12: </label>
<input type="text" name="name12" value="name12">
<input type="text" name="rating12" value="12">
</div>
<div class="group">
<label for="">label-13: </label>
<input type="text" name="name13" value="name13">
<input type="text" name="rating13" value="13">
</div>
<div class="group">
<label for="">label-14: </label>
<input type="text" name="name14" value="name14">
<input type="text" name="rating14" value="14">
</div>
<div class="group">
<label for="">label-15: </label>
<input type="text" name="name15" value="name15">
<input type="text" name="rating15" value="15">
</div>
<div class="group">
<label for="">label-16: </label>
<input type="text" name="name16" value="name16">
<input type="text" name="rating16" value="16">
</div>
<div class="group">
<label for="">label-17: </label>
<input type="text" name="name17" value="name17">
<input type="text" name="rating17" value="17">
</div>
<div class="group">
<label for="">label-18: </label>
<input type="text" name="name18" value="name18">
<input type="text" name="rating18" value="18">
</div>
<div class="group">
<label for="">label-19: </label>
<input type="text" name="name19" value="name19">
<input type="text" name="rating19" value="19">
</div>
<div class="group">
<label for="">label-20: </label>
<input type="text" name="name20" value="name20">
<input type="text" name="rating20" value="20">
</div>
<pre id="rs"></pre>
</body>
</html>
|
Output
Create JSON form form input
Create JSON form form input ES6