js对象与json兑现的相互转换
css 以及 html代码
<style type="text/css">
.conn{
height: 200px;
width: 200px;
border: 1px solid red;
float: left;
margin: 5px;
}
.btn{
margin-top: 220px;
float:left;
}
</style>
<body>
<textarea id="txt1" class="conn"></textarea>
<textarea id="txt2" class="conn"></textarea>
<button id="btn" class="btn">转换</button>
</body>
核心代码
<script type="text/javascript">
function convert(){
var txt1=document.getElementById("txt1");//获取左侧文本框
var txt2=document.getElementById("txt2");//获取右侧文本框
var msg="";
txt2.value=""
try{
var object=JSON.parse(txt1.value)//将字符串转化为对象
}catch(error){
txt2.value="转换失败"
return;
}
txt2.value+="转换对象成功\r\n";
//判断对象的constructor属性值
switch(object.constructor){
case Array://如果是数组
txt2.value+="转换成数组\r\n";
for(var i in object){
for(var j in object[i]){
msg+=j+":"+object[i][j]+"\r\n";
}
}
break;
case Object: //对象类型
txt2.value+="转换成了数组对象\r\n";
for(var i in object){
msg+=i+":"+object[i]+"\r\n";
}
break;
}
txt2.value+=msg;
}
var obtn=document.getElementById("btn");
obtn.onclick=function(){
convert();
}效果展示