[javascript] URLパラメタをJSON形式に変換
[javascript] URLパラメタをJSON形式に変換:
変換前（'&'で改行）
?club_name=Foo+Bar &club.tel=0120-345-678 &club.post=123-4567 &m_id[0]=101 &member[0].sex=2 &member[0].age=30 &m_id[1]=102 &member[1].sex=1 &member[1].age=28 &m_id[2]=103 &member[2].sex=2 &member[2].age=26
変換後（JSON）
{
"club_name": "Foo+Bar",
"club": {
"tel": "0120-345-678",
"post": "123-4567"
},
"m_id": [
"101",
"102",
"103"
],
"member": [
{
"sex": "2",
"age": "30"
},
{
"sex": "1",
"age": "28"
},
{
"sex": "2",
"age": "26"
}
]
}
実装
test.js
function getParams(search) {
var json = {};
search = decodeURIComponent(search);
var a = search.split(/[?&]/);
a.forEach(function(e,i){
if(e.length<=0) {
return;
}
var ka = e.split('=');
var kb = ka[0].split('.');
var kc = kb[0].split(/[\[\]]/);
var x = {f:json, g:kc[0]};
parseParam(x, kc[1], []);
parseParam(x, kb[1], {});
x.f[x.g] = ka[1];
})
return json;
}
function parseParam(x, p, n) {
if (p !== void 0) {
if(x.f[x.g] === void 0){
x.f[x.g] = n;
}
x.f = x.f[x.g];
x.g = p;
}
}
function test(a, b) {
var search = decodeURIComponent(location.search);
a.value = search.replace(/&/g, "\n&");
var json = getParams(location.search);
b.value = JSON.stringify(json, null, ' ');
{
var j = {};
j["club_name"] = "Foo+Bar";
j["club"] = {};
j["club"]["tel"] = "0120-345-678";
j["club"]["post"] = "123-4567";
j["m_id"] = [];
j["m_id"][0] = "101";
j["m_id"][1] = "102";
j["m_id"][2] = "103";
j["member"] = [];
j["member"][0] = {};
j["member"][0]["sex"] = "2";
j["member"][0]["age"] = "30";
j["member"][1] = {};
j["member"][1]["sex"] = "1";
j["member"][1]["age"] = "28";
j["member"][2] = {};
j["member"][2]["sex"] = "2";
j["member"][2]["age"] = "26";
console.log(j);
}
{
var j = {
"club_name": "Foo+Bar",
"club": { "tel": "0120-345-678", "post": "123-4567" },
"m_id": [ "101", "102", "103" ],
"member": [
{ "sex": "2", "age": "30" },
{ "sex": "1", "age": "28" },
{ "sex": "2", "age": "26" }
]
};
console.log(j);
}
}
test.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script src="test.js"></script>
<style type="text/css">
<!--
table,tr,th,td { border: solid thin; }
-->
</style>
</head>
<body onload="test(tarea_a, tarea_b)">
<form name="f1">
<label for="club_name">club_name:</label>
<input type="text" id="club_name" name="club_name" value="Foo Bar">
<fieldset style="width: 50%;">
<label for="club.tel">club.tel:</label>
<input type="text" id="club.tel" name="club.tel" value="0120-345-678">
<label for="club.post">club.post:</label>
<input type="text" id="club.post" name="club.post" value="123-4567">
</fieldset>
<table>
<tr>
<th>会員番号</th>
<th>氏名</th>
<th>性別</th>
<th>年齢</th>
<th>職業</th>
</tr>
<tr>
<td>
<input type="number" id="m_id0" name="m_id[0]" value="101">
</td>
<td>佐藤 一郎</td>
<td>
<input type="radio" id="member0.sex.m" name="member[0].sex" value="1">男
<input type="radio" id="member0.sex.f" name="member[0].sex" value="2" checked="true">女
</td>
<td>
<input type="number" id="member0.age" name="member[0].age" value="30">
</td>
<td>自営業</td>
</tr>
<tr>
<td>
<input type="number" id="m_id1" name="m_id[1]" value="102">
</td>
<td>山田 次郎</td>
<td>
<input type="radio" id="member1.sex.m" name="member[1].sex" value="1" checked="true">男
<input type="radio" id="member1.sex.f" name="member[1].sex" value="2">女
</td>
<td>
<input type="number" id="member0.age" name="member[1].age" value="28">
</td>
<td>公務員</td>
</tr>
<tr>
<td>
<input type="number" id="m_id2" name="m_id[2]" value="103">
</td>
<td>鈴木 花子</td>
<td>
<input type="radio" id="member2.sex.m" name="member[2].sex" value="1">男
<input type="radio" id="member2.sex.f" name="member[2].sex" value="2" checked="true">女
</td>
<td>
<input type="number" id="member0.age" name="member[2].age" value="26">
</td>
<td>会社員</td>
</tr>
</table>
<input type="submit">
</form>
<p style="display:inline-block">
<label for="tarea_a">変換前（'&'で改行）：</label><br>
<textarea id="tarea_a" name="tarea_a" cols="30" rows="15"></textarea>
</p>
<p style="display:inline-block">
<label for="tarea_b">変換後（JSON）：</label><br>
<textarea id="tarea_b" name="tarea_b" cols="30" rows="15"></textarea>
</p>
</body>
</html>
コメント
コメントを投稿