js中json对象与字符串之间的转化
|
admin
2015年4月26日 10:28
本文热度 6407
|
网上有不少教程文章已介绍这方面的内容，但费了许久才找到我需要的东西，将demo贴在此处，以作记录。
json-demo.html:
- <!DOCTYPE html>
- <html>
- <head>
- <title>json-demo</title>
- </head>
- <body>
- <textarea id="textarea1" value="" style="width: 500px;height: 300px;"></textarea>
- </body>
- <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
- <script type="text/javascript" src="json2.js"></script>
- <script type="text/javascript">
- <!--
- $(document).ready(function(){
- test1();
- });
- function test1(){
- // 简单字符串转换为json对象
- var str = '{ "label": "aa", "value": "bb" }';
- var obj = JSON.parse(str);
- show(obj.label);
- // 较复杂的json字符串书写格式
- var str2 = '{' +
- '"chart":{' +
- '"xAxisName":"dd",' +
- '"yAxisName":"ee"' +
- '},"data":[]' +
- '}';
- var obj2 = JSON.parse(str2);
- // 查找json对象
- show(obj2.chart.xAxisName);
- // 修改json对象
- obj2.chart.xAxisName = "dddd";
- show(obj2.chart.xAxisName);
- // 删除json对象
- delete obj2.chart.xAxisName;
- show(obj2.chart.xAxisName);
- var elemSet;
- // js操作json对象
- for(var i=0; i<2 ;i++){
- elemSet = {"label":i*2,"value":i*10,"color":"76A5DB"};
- // 增加json对象中的data集合元素
- obj2.data.push(elemSet);
- }
- show(obj2.data[0].label+','+obj2.data[0].value+','+'obj2.data[0].color');
- // 将json对象转换为字符串
- show(JSON.stringify(obj2));
- }
- function show(text){
- var input = $('#textarea1').val();
- input += '---' + text + '\n';
- $('#textarea1').val(input);
- }
- -->
- </script>
- </html>
<!DOCTYPE html>
<html>
<head>
<title>json-demo</title>
</head>
<body>
<textarea id="textarea1" value="" style="width: 500px;height: 300px;"></textarea>
</body>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
test1();
});
function test1(){
// 简单字符串转换为json对象
var str = '{ "label": "aa", "value": "bb" }';
var obj = JSON.parse(str);
show(obj.label);
// 较复杂的json字符串书写格式
var str2 = '{' +
'"chart":{' +
'"xAxisName":"dd",' +
'"yAxisName":"ee"' +
'},"data":[]' +
'}';
var obj2 = JSON.parse(str2);
// 查找json对象
show(obj2.chart.xAxisName);
// 修改json对象
obj2.chart.xAxisName = "dddd";
show(obj2.chart.xAxisName);
// 删除json对象
delete obj2.chart.xAxisName;
show(obj2.chart.xAxisName);
var elemSet;
// js操作json对象
for(var i=0; i<2 ;i++){
elemSet = {"label":i*2,"value":i*10,"color":"76A5DB"};
// 增加json对象中的data集合元素
obj2.data.push(elemSet);
}
show(obj2.data[0].label+','+obj2.data[0].value+','+'obj2.data[0].color');
// 将json对象转换为字符串
show(JSON.stringify(obj2));
}
function show(text){
var input = $('#textarea1').val();
input += '---' + text + '\n';
$('#textarea1').val(input);
}
-->
</script>
</html>
注：依赖jquery.js和json2.js。
运行效果：
---aa
---dd
---dddd
---undefined
---0,0,obj2.data[0].color
---{"chart":{"yAxisName":"ee"},"data":[{"label":0,"value":0,"color":"76A5DB"},{"label":2,"value":10,"color":"76A5DB"}]}
该文章在 2015/4/26 10:28:47 编辑过
400 186 1886
