json串和js对象互转

最新推荐文章于 2024-05-23 10:47:32 发布

多喝热水i000

最新推荐文章于 2024-05-23 10:47:32 发布

阅读量1k

点赞数 1

文章标签： html js json javascript

本文链接：https://blog.csdn.net/m0_55588226/article/details/121658048

版权

文章目录

json字符串和js对象的互转

json字符串和js对象的互转

JSON对象: 用来完成 js对象和 json字符串的互转
js对象转json串: JSON.stringify()
json串转成js对象: JSON.parse()

json字符串转成js对象

//1. json字符串,对象的写法
var a = '{"name":"张三","age":"20"}';
var jsobj = JSON.parse(a); //json字符串转成js对象
console.log(jsobj)
console.log(jsobj.name) // 解析对象里name属性的值

在这里插入图片描述

json数组转换js对象

//2. json字符串,数组的写法
var b = '[{"name":"张三","age":"20"},{"name":"王五","age":"18"}]'
// 获取b里的王五
var jsobjs = JSON.parse(b) //json数组转换js对象
console.log(jsobjs)
var jn = jsobjs[1].name 
console.log(jn)

在这里插入图片描述

js对象转json串

// 4. 创建js对象
var obj = {
name : "老四",
age : "18"
}
console.log(obj)
// js对象转json串
var jsonchuai = JSON.stringify(obj)
console.log(jsonchuai)

在这里插入图片描述

测试的完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSON对象</title>
		<script>
			// 定义函数
			function test1(){
					/* JSON对象 用来完成js和json串的互转 */
				//1. json字符串,对象的写法
				var a = '{"name":"张三","age":"20"}'
				//2. json字符串,数组的写法
				var b = '[{"name":"张三","age":"20"},{"name":"王五","age":"18"}]'
				
				//3. JSON对象
				// 解析a里name属性的值
				var jsobj = JSON.parse(a); //json字符串转成js对象
				console.log(jsobj)
				console.log(jsobj.name) // 解析对象里name属性的值
				//需求: 利用dom技术,把解析到的name属性的值,展示在id="d2"位置
				document.getElementById("d2").innerHTML=jsobj.name
				
				// 获取b里的王五
				var jsobjs = JSON.parse(b)
				console.log(jsobjs)
				var jn = jsobjs[1].name
				console.log(jn)
				// 利用dom技术,把解析到的age属性的值,展示在id="d3"位置
				document.getElementById("d3").innerHTML=jsobjs[1].age
				
				
				// 4. 创建js对象
				var obj = {
					name : "老四",
					age : "18"
				}
				console.log(obj)
				// js对象转json串
				var jsonchuai = JSON.stringify(obj)
				
				console.log(jsonchuai)
			}
		</script>
	</head>
	<body>
		<div id="d1" onclick="test1()">我是div1</div>
		<div id="d2">我是div2</div>
		<div id="d3">我是div3</div>
	</body>
</html>