js中json对象与字符串之间的转化

最新推荐文章于 2024-06-30 04:12:17 发布

daxiang12092205

最新推荐文章于 2024-06-30 04:12:17 发布

阅读量8.7k

点赞数

分类专栏：前端文章标签： json js 对象操作修改

本文链接：https://blog.csdn.net/daxiang12092205/article/details/17374631

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

网上有不少教程文章已介绍这方面的内容，但费了许久才找到我需要的东西，将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>

注：依赖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"}]}