使用js处理json数据(举例)

下面是json数据:(题型来自某家公司的面试题)

var jsonObject = {
			        "action" : "add_user",
			        "user" : "{name:\"张三\",age:\"16\",phones:[\"13412345678\",\"18812341234\"]}",
					"family" : {
			             "mom" : {"name":"张三妈妈","age":45},
			             "dad" : {"name":"张三爸爸","age":48}
			
			         },
			         "classmate" : [
			             {"name":"李四","age":14},
			             {"name":"王五","age":15},
			             {"name":"小刘","age":16}
			         ]
			
			     };

(1)获取使用者add_user;
(2)遍历出用户的手机号;
(3)获取妈妈名字;
(4)添加,家人妹妹;
(5)遍历打印所有家人;
(6)查找同学王五年龄。

答案:
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script type="text/javascript">
			
			var jsonObject = {
			        "action" : "add_user",
			        "user" : "{name:\"张三\",age:\"16\",phones:[\"13412345678\",\"18812341234\"]}",
					"family" : {
			             "mom" : {"name":"张三妈妈","age":45},
			             "dad" : {"name":"张三爸爸","age":48}
			
			         },
			         "classmate" : [
			             {"name":"李四","age":14},
			             {"name":"王五","age":15},
			             {"name":"小刘","age":16}
			         ]
			
			     };

			//(1)获取使用者add_user
			console.log("(1)获取使用者:", jsonObject.action );

			//(2)遍历出用户的手机号
			var userinfo = jsonObject.user;
			//console.log(typeof(userinfo));   //string
			var userobj = eval('('+userinfo+')');  //将json字符串,转为object
			var userphonearray = userobj.phones;
			for(var value of userphonearray){
				console.log("(2)用户的手机号: ",value);
			}

			//(3)获取妈妈名字
			console.log("(3)获取妈妈名字:",jsonObject.family.mom.name)  

			//(4)添加,家人妹妹
			jsonObject.family.sister={name:'妹妹',age:10};
			console.log("(4)添加,家人妹妹:",jsonObject.family.sister) 

			//(5)遍历打印所有家人
			console.log("(5)遍历打印所有家人:")
			var familys = jsonObject.family;     //遍历对象
			//console.log(1234,familys["dad"]);    //Object { name: "张三爸爸", age: 48 }
			Object.keys(familys).forEach(function(key){
				console.log(key,familys[key]);
			})

			//(6)查找同学王五年龄
			var classmates = jsonObject.classmate;
			function fun(arrs,str){
				for(var i=0; i<arrs.length; i++){
					if(arrs[i].name === str){
						return arrs[i].age;
					}
				}
			}
			var classage = fun(classmates,"王五");
			console.log("(6)查找同学王五年龄:",classage);
			
		</script>
	</head>
	<body>
	</body>
</html>
假设有一份名为data.json的文件,内容如下: ``` { "employees": [ { "firstName": "John", "lastName": "Doe", "age": 25, "gender": "male", "department": "IT" }, { "firstName": "Jane", "lastName": "Doe", "age": 30, "gender": "female", "department": "HR" }, { "firstName": "Bob", "lastName": "Smith", "age": 45, "gender": "male", "department": "Marketing" } ] } ``` 我们可以使用JavaScript的XMLHttpRequest对象来获取这份json数据,并将其展示在HTML页面中。具体实现如下: ``` <!DOCTYPE html> <html> <head> <title>Load data from JSON file</title> </head> <body> <div id="employees"></div> <script> var xhr = new XMLHttpRequest(); //创建XMLHttpRequest对象 xhr.onreadystatechange = function() { //定义请求状态变化的回调函数 if (this.readyState == 4 && this.status == 200) { //如果请求成功 var data = JSON.parse(xhr.responseText); //解析json数据 var employees = data.employees; //获取员工信息数据 var html = ""; for(var i=0; i<employees.length; i++) { //循环生成HTML代码 html += "<p>姓名:" + employees[i].firstName + " " + employees[i].lastName + "</p>"; html += "<p>年龄:" + employees[i].age + "</p>"; html += "<p>性别:" + employees[i].gender + "</p>"; html += "<p>部门:" + employees[i].department + "</p><hr>"; } document.getElementById("employees").innerHTML = html; //将HTML代码插入页面中 } }; xhr.open("GET", "data.json", true); //打开请求 xhr.send(); //发送请求 </script> </body> </html> ``` 这段代码通过XMLHttpRequest对象获取data.json文件中的json数据,并解析为JavaScript对象。然后根据员工信息数据动态生成HTML代码,最后将HTML代码插入页面中展示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值