×

将键/值对添加到JSON对象的两种方法

作者:andy0012020.05.07来源:Web前端之家浏览:1670评论:0

将键/值对添加到JSON对象的两种方法:点表示法和方括号表示法。这两种方法都被广泛接受,下面通过示例来了解一下。

示例1:使用点表示法将{"prop_4" : "val_4"}添加到JSON对象中

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
	</head>

	<body>
		<h2 style="color:green;">如何将元素添加到JSON对象?</h2>

		<p id="up" style=" font-weight: bold"></p>

		<button onclick="fun()">单击以添加</button>

		<p id="down" style="color:green; font-weight: bold" ;></p>

		<script>
			var demo = {
				prop_1: "val_1",
				prop_2: "val_2",
				prop_3: "val_3"
			};
			var p_up =
				document.getElementById("up");
			var p_down =
				document.getElementById("down");
			p_up.innerHTML =
				JSON.stringify(demo);

			function fun() {
				demo.prop_4 = "val_4";
				p_down.innerHTML = JSON.stringify(demo);
			}
		</script>
	</body>

</html>

示例2:使用方括号表示法将{"prop_4" : "val_4"}添加到JSON对象中

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
	</head>

	<body>
		<h2 style="color:green;">如何将元素添加到JSON对象?</h2>

		<p id="up" style=" font-weight: bold"></p>

		<button onclick="fun()">单击以添加</button>

		<p id="down" style="color:green; font-weight: bold" ;></p>

		<script>
			var demo = { 
	            prop_1: "val_1", 
	            prop_2: "val_2", 
	            prop_3: "val_3" 
	        }; 
	        var p_up =  
	            document.getElementById("up"); 
	        var p_down =  
	            document.getElementById("down"); 
	        p_up.innerHTML =  JSON.stringify(demo); 
	  
	        function fun() { 
	            demo["prop_4"] = "val_4"; 
	            p_down.innerHTML = JSON.stringify(demo); 
	        } 
		</script>
	</body>

</html>

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/c788kjlkdf8039485094835.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    什么机翻...

  • Web前端之家

    只是更轻便,还是有些差距的呢,小项目可以玩玩。...

  • ja124

    这个跟vue和react比,好些吗?...

  • Web前端之家

    OK,已经更新,谢谢!...

  • 韩涛博客

    韩涛博客的域名更换为www.hantaosec.com啦,请更新一下域名哈,谢谢。我还会继续链着咱们...

  • Web前端之家

    请持续关注Web前端之家。...

  • Y4K

    谢谢指导,这下背景问题解决了!...

  • Web前端之家

    要用起来才可以....

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria