JavaScript使用JS从JSON获取信息并遍历输出到网页展示信息------JavaScript

已于 2023-11-11 20:06:26 修改
阅读量541 收藏 1
点赞数 1
分类专栏： 前端 文章标签： javascript 前端 ecmascript react.js node.js js vue.js
于 2023-11-11 15:56:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134349578
版权 
<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
	<head>
		<!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>HtmlAll</title>
	</head>
	<body>
		<!-- JSON全称为JavaScript Object Notation即为数据交换格式,对象标记 -->
		<!-- JSON的主要作用是一种标准的轻量的数据交换格式,特点是体积小易解析 -->
		<!-- 在实际的开发中,JSON和XML是用的最多的数据交换格式 -->
		<!-- XML体积大,解析麻烦,优点是格式严谨,相对更难解析 -->
		<!-- HTML和XML有一个父类叫SGML(标准通用的标记语言) -->
		<script type="text/javascript">
			window.onload = function() 
			{
				var jsonObj =
				{
					"sno" : "110",
					"sname" : "Jack",
					"sex" : "男"
				};
				student = function(sno,sname,sex)
				{
					this.sno = sno;
					this.sname = sname;
					this.sex = sex;
				}
				//访问json对象属性
				// Json也被称为无类型对象,轻量级,轻巧,体积小,易解析
				// alert(jsonObj.sno + jsonObj.sname + jsonObj.sex);
				var stu = new student(jsonObj.sno,jsonObj.sname,jsonObj.sex);
				// alert(stu.sno + stu.sname + stu.sex);
				var students = 
				[
					{
						"sno" : "110",
						"sname" : "Jack",
						"sex" : "男"
					},
					{
						"sno" : "120",
						"sname" : "Rose",
						"sex" : "女"
					},
					{
						"sno" : "130",
						"sname" : "Tim",
						"sex" : "男"
					}
				];
				for (var i = 0; i < students.length; i++) 
				{
					var student = students[i];
					// alert(student.sno + student.sname + student.sex);
				}
				var user = 
				{
					"usercode" : 110,
					"username" : "Rose",
					"sex" : true,
					"address" : {
						"city" : "北京",
						"street" : "大兴区",
						"zipcode" : "12221231"
					},
					"aihao" : ["smoke","drink","tt"]
				};
				// 访问人名以及居住的城市
				// alert(user.username + user.address.city);
				//描述整个班级
				var iop = 
				{
					"total" : 3,
					"studentInfo" : [
						{
							"usercode" : 110,
							"username" : "Rose",
							"sex" : true,
							"address" : {
								"city" : "北京",
								"street" : "大兴区",
								"zipcode" : "12221231"
							},
							"aihao" : ["smoke","drink","tt"]
						},
						{
							"usercode" : 110,
							"username" : "Jack",
							"sex" : true,
							"address" : {
								"city" : "北京",
								"street" : "大兴区",
								"zipcode" : "12221231"
							},
							"aihao" : ["smoke","drink","tt"]
						},
						{
							"usercode" : 110,
							"username" : "Tim",
							"sex" : true,
							"address" : {
								"city" : "北京",
								"street" : "大兴区",
								"zipcode" : "12221231"
							},
							"aihao" : ["smoke","drink","tt"]
						}
					]
				}
				//遍历学生表所有的学生名字
				for (var i = 0; i < iop.studentInfo.length; i++) {
					// alert(iop.studentInfo[i].username);
				}
				//Eval函数的作用是将字符串当作一段JS代码解释执行
				window.eval("var tyi = 100;");
				// alert(tyi);
				//为什么要用eval函数,因为我们java查询数据库后,将数据在java程序中拼接成json格式的字符串
				//将json回传给前端浏览器,也就是说java响应到浏览器的仅仅是一段json形式的字符串,浏览器不认识
				//接下来要用eval函数,将这段字符串转换为json对象
				var fromJava = "{\"sno\":\"110\",\"sname\":\"Jack\",\"sex\":\"男\"}";
				//使用eval函数转换对象
				window.eval("var JsonIO = " + fromJava);
				//输出json的信息
				// alert(JsonIO.sno);
				//JS中,{}和[]有什么区别
				//{}是json,而[]是数组
				//JSON是一种业内公认的数据交换格式标准
				//json在JS中以对象的形式存在
				//因为JS中存在的包括function在内的都可以视为对象
				var jsin = {
					"username" : "zhangsan"
				};
				//两种取值方法
				// alert(jsin.username);
				// alert(jsin["username"]);
				var empData = {
					"total" : 4,
					"emps" : [
						{
							"empno" : 7369,
							"ename" : "Smith",
							"sal" : 800.0
						},
						{
							"empno" : 7369,
							"ename" : "Jack",
							"sal" : 800.0
						},
						{
							"empno" : 7369,
							"ename" : "Tim",
							"sal" : 800.0
						},
						{
							"empno" : 7369,
							"ename" : "Rose",
							"sal" : 800.0
						}
					]
				};
				document.getElementById("show").onclick = function()
				{
					var html = "";
					var count = 0;
					for (var i = 0; i < empData.emps.length; i++) 
					{
						count++;
						var emp = empData.emps[i];
						html += "<tr><td>";
						html += emp.empno;
						html += "</td><td>";
						html += emp.ename;
						html += "</td><td>"
						html += emp.sal;
						html += "</td></tr>"
					}
					document.getElementById("empsShow").innerHTML += html;
					document.getElementById("EmpNumber").innerText = count;
				}
			}
			//希望把数据暂时到table中
		</script>
		<table align="center" border="solid">
			<h1>员工列表</h1>
			<input type="button" value="显示员工信息" id="show"/>
			<thead>
				<tr>
					<th>员工编号</th>
					<th>员工名</th>
					<th>薪水</th>
				</tr>
			</thead>
			<tbody id="empsShow">
			</tbody>
		</table>
		总共<span id="EmpNumber">0</span>条记录
	</body>
</html>

<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
    <head>
        <!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HtmlAll</title>
    </head>
    <body>
        <!-- JSON全称为JavaScript Object Notation即为数据交换格式,对象标记 -->
        <!-- JSON的主要作用是一种标准的轻量的数据交换格式,特点是体积小易解析 -->
        <!-- 在实际的开发中,JSON和XML是用的最多的数据交换格式 -->
        <!-- XML体积大,解析麻烦,优点是格式严谨,相对更难解析 -->
        <!-- HTML和XML有一个父类叫SGML(标准通用的标记语言) -->
        <script type="text/javascript">
            window.onload = function() 
            {
                var jsonObj =
                {
                    "sno" : "110",
                    "sname" : "Jack",
                    "sex" : "男"
                };
                student = function(sno,sname,sex)
                {
                    this.sno = sno;
                    this.sname = sname;
                    this.sex = sex;
                }
                //访问json对象属性
                // Json也被称为无类型对象,轻量级,轻巧,体积小,易解析
                // alert(jsonObj.sno + jsonObj.sname + jsonObj.sex);
                var stu = new student(jsonObj.sno,jsonObj.sname,jsonObj.sex);
                // alert(stu.sno + stu.sname + stu.sex);
                var students = 
                [
                    {
                        "sno" : "110",
                        "sname" : "Jack",
                        "sex" : "男"
                    },
                    {
                        "sno" : "120",
                        "sname" : "Rose",
                        "sex" : "女"
                    },
                    {
                        "sno" : "130",
                        "sname" : "Tim",
                        "sex" : "男"
                    }
                ];
                for (var i = 0; i < students.length; i++) 
                {
                    var student = students[i];
                    // alert(student.sno + student.sname + student.sex);
                }
                var user = 
                {
                    "usercode" : 110,
                    "username" : "Rose",
                    "sex" : true,
                    "address" : {
                        "city" : "北京",
                        "street" : "大兴区",
                        "zipcode" : "12221231"
                    },
                    "aihao" : ["smoke","drink","tt"]
                };
                // 访问人名以及居住的城市
                // alert(user.username + user.address.city);
                //描述整个班级
                var iop = 
                {
                    "total" : 3,
                    "studentInfo" : [
                        {
                            "usercode" : 110,
                            "username" : "Rose",
                            "sex" : true,
                            "address" : {
                                "city" : "北京",
                                "street" : "大兴区",
                                "zipcode" : "12221231"
                            },
                            "aihao" : ["smoke","drink","tt"]
                        },
                        {
                            "usercode" : 110,
                            "username" : "Jack",
                            "sex" : true,
                            "address" : {
                                "city" : "北京",
                                "street" : "大兴区",
                                "zipcode" : "12221231"
                            },
                            "aihao" : ["smoke","drink","tt"]
                        },
                        {
                            "usercode" : 110,
                            "username" : "Tim",
                            "sex" : true,
                            "address" : {
                                "city" : "北京",
                                "street" : "大兴区",
                                "zipcode" : "12221231"
                            },
                            "aihao" : ["smoke","drink","tt"]
                        }
                    ]
                }
                //遍历学生表所有的学生名字
                for (var i = 0; i < iop.studentInfo.length; i++) {
                    // alert(iop.studentInfo[i].username);
                }
                //Eval函数的作用是将字符串当作一段JS代码解释执行
                window.eval("var tyi = 100;");
                // alert(tyi);
                //为什么要用eval函数,因为我们java查询数据库后,将数据在java程序中拼接成json格式的字符串
                //将json回传给前端浏览器,也就是说java响应到浏览器的仅仅是一段json形式的字符串,浏览器不认识
                //接下来要用eval函数,将这段字符串转换为json对象
                var fromJava = "{\"sno\":\"110\",\"sname\":\"Jack\",\"sex\":\"男\"}";
                //使用eval函数转换对象
                window.eval("var JsonIO = " + fromJava);
                //输出json的信息
                // alert(JsonIO.sno);
                //JS中,{}和[]有什么区别
                //{}是json,而[]是数组
                //JSON是一种业内公认的数据交换格式标准
                //json在JS中以对象的形式存在
                //因为JS中存在的包括function在内的都可以视为对象
                var jsin = {
                    "username" : "zhangsan"
                };
                //两种取值方法
                // alert(jsin.username);
                // alert(jsin["username"]);
                var empData = {
                    "total" : 4,
                    "emps" : [
                        {
                            "empno" : 7369,
                            "ename" : "Smith",
                            "sal" : 800.0
                        },
                        {
                            "empno" : 7369,
                            "ename" : "Jack",
                            "sal" : 800.0
                        },
                        {
                            "empno" : 7369,
                            "ename" : "Tim",
                            "sal" : 800.0
                        },
                        {
                            "empno" : 7369,
                            "ename" : "Rose",
                            "sal" : 800.0
                        }
                    ]
                };
                document.getElementById("show").onclick = function()
                {
                    var html = "";
                    var count = 0;
                    for (var i = 0; i < empData.emps.length; i++) 
                    {
                        count++;
                        var emp = empData.emps[i];
                        html += "<tr><td>";
                        html += emp.empno;
                        html += "</td><td>";
                        html += emp.ename;
                        html += "</td><td>"
                        html += emp.sal;
                        html += "</td></tr>"
                    }
                    document.getElementById("empsShow").innerHTML += html;
                    document.getElementById("EmpNumber").innerText = count;
                }
            }
            //希望把数据暂时到table中
        </script>
        <table align="center" border="solid">
            <h1>员工列表</h1>
            <input type="button" value="显示员工信息" id="show"/>
            <thead>
                <tr>
                    <th>员工编号</th>
                    <th>员工名</th>
                    <th>薪水</th>
                </tr>
            </thead>
            <tbody id="empsShow">
            </tbody>
        </table>
        总共<span id="EmpNumber">0</span>条记录
    </body>
</html>

旧约Alatus
关注
专栏目录
js显示json数据
山鹰的专栏
07-16 2772
json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。 复制代码 代码如下: $.getJSON(url,[data],[callback]) url：加载的页面地址 data: 可选项，发送到服务器的数据，格式是key/value callback:可选项，加载成功后执行的回调函数 1.首先建一个JSON格式的文件useri
JS获取json文件内容并处理参考
09-14
利用jquery的post功能获取json的内容并作后续处理， 本例子需要在web环境下跑 本例子需要在web环境下跑 本例子需要在web环境下跑
php json html,如何在html中显示JSON数据
weixin_42625070的博客
03-10 805
在项目中我们需要将json数据直接显示在页面上，但是如果直接显示字符串很不方便查看，下面小编给大家带来了html中显示JSON数据的方法，需要的的朋友参考下吧背景：有时候我们需要将json数据直接显示在页面上(比如在做一个接口测试的项目，需要将接口返回的结果直接展示)，但是如果直接显示字符串，不方便查看。需要格式化一下。解决方案：其实JSON.stringify本身就可以将JSON格式化，具体的用...
json数据展示插件，jsonview.js
09-01
jsonview是chrome浏览器的一个插件，用来在浏览器中查看json数据。比如你在浏览器中可以查看从服务器端传回来的json数据，这些数据可能没有经过格式化的，也或者是经过了unicode编码，没有缩进，没有换行等等，造成阅读有一定困难。那么使用jsonview，可以自动对json数据转码，缩进，格式化，使得开发人员可以更好的阅读信息。 官网：http://jsonview.com/
JS页面显示JSON格式化数据
Lily_Deng的博客
10-19 3174
1.新建html <div class="col-sm-10 healthName" id="msg" style="height: 550px;overflow-x: auto;overflow-y: auto"> <pre id="data_info"></pre> </div> 2.js声明 var show = document.getElementById('data_info'); var msg = "[{"actName":"02","
JS格式化json并展示
热门推荐
HaleyTiger的博客
03-30 1万+
格式化json数据展示区域 <div id="showJsonData" contenteditable="true" style="width:100%;height:300px;border:1px red solid;">测试</div> <#form:textarea path="showJsonData" maxlength="10000" class="f...
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
10-17
主要介绍了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式,结合实例形式总结分析了vue.js使用v-for指令遍历输出js数组与json对象的常见操作技巧,需要的朋友可以参考下
javascript for-in有序遍历json数据并探讨各个浏览器差异
11-22
object本身就是无对象的集合，因此在用 for-in 语句遍历对象的属性时，遍历出的属性顺序与对象定义时不同。 了解W3C标准： 根据 ECMA-262（ECMAScript）第三版中描述，for-in 语句的属性遍历的顺序是由对象定义时...
node-json-db：一个简单的“数据库”，它使用JSON文件作为Node.JS
02-03
该模块使用JavaScript对象将数据直接存储到JSON文件中。 您可以使用DataPath轻松遍历数据以直接到达有趣的属性。 DataPath的原理与XMLPath相同。 例 { test : { data1 : { array : [ 'test' , 'array' ] } , ...
JavaScript解析json格式数据简单示例
04-08 960
JS对象和JSON格式数据的相互转换其实就是两个问题：JS对象转换成为JSON格式数据、JSON格式数据转换成为JS对象。python肯定不能直接处理JS对象数据，所以要把JS对象转换成为python能处理的一种数据格式（通常是字典dict），同样，python取数据反馈到前端也要把字典数据转换成JS能处理的对象，这个中间转换数据格式通常就是JSON。流程：python组装一个dict数据并转成JSON格式传递给前端，或者前端通过jQuery的$.getJSON()方法直接读取这个JSON格式的数据。
js实现上传excel解析返回json到页面显示
06-09
js实现excel文件上传解析，返回json并显示到页面 支持两种格式
html中通过JS获取JSON数据并加载的方法
12-29
在写内容逻辑重复性的页面时，用json数据可以显著提高编程效率，并且便于后期的数据维护。因此，在视频专题页面，需要展示多列视频数据，我选择了用json。 HTML如下（只展示重点部分，需要引用JQ） <div class=container-fluid> <div class=container> <div class=left> <div class=title> 热门视频 </div> <div class=medialist>
JS-JSON-获取JSON对象中的数据展示到表格里
TSCCG的博客
08-09 6823
JS-JSON-获取JSON对象中的数据展示到表格里 1.要求 点击按钮，将学生信息展示到表格里，并显示总记录条数。 2.实现思路 创建JSON对象 先创建一个JSON对象data，有总人数total和学生信息emps两个属性 emps是一个JSON数组，里面存放着所有学生的信息。 搭框架 将按钮、表格等都先创建好 将JSON对象中的数据放入框架中 获取按钮对象，将click事件注册上去 获取JSON对象中的emps属性，也就是存储所有学生信息的JSON数组 定义一个变量，遍历emps数组
如何用js去请求json里面的内容并显示在页面上
weixin_72636650的博客
05-15 336
看到里面最后一行的注释了吧，用showGoods（data）这个只是函数名和参数随意就好，下面用函数里面的字符拼接去将想要显示的内容拼接出来，后面在用document去渲染到页面上就好啦，上代码。第四步定义响应执行的函数，当readyState属性发生变化时，会自动调用该方法。4：请求已完成且响应已就绪。第一步创建XMLHttpRequest对象。第五步，交互流程（这里面还分为5个阶段）这是请求json里面数据的方法，上代码。用js请求json里面的数据。第二步设置请求方式和请求地址。
Vue.js学习——获取本地JSON文件数据展示到页面
liu5282828的博客
10-19 5868
Vue.js学习——获取本地JSON文件数据展示到页面 自己跟着视频学习，就是B站上搜索 vue.js 点击量最多的那个。 自己编写的json文件如下 { "status":0, "message":[ { "id":1, "name":"三菱", "ctime":"2017-02-03" }, { "id":2, "name":"保时捷", "ctime":"2017-02-03" },
js文件输出json样式
M212474057的博客
04-07 1599
在JS中将JSON的字符串解析成JSON数据格式，一般有两种方式： 1.一种为使用eval()函数。 2. 使用Function对象来进行返回解析。 1.一种为使用eval()函数： 用eval函数来解析，并且使用jquery的each方法来遍历。 例如： 代码如下: 示例一： <html> <head> <title>Json测试</title> <script src="/Scripts/jquer...
JSON数据展示
A_lamp的博客
11-02 382
json数据展示
JS中的JSON（秒懂如何操作JSON）
最新发布
weixin_35673514的博客
07-04 1978
一、JSON介绍1.概念JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript的语法子集，但是独立于编程语言。JSON格式可以用来在网络中传输数据，也可以存储数据。JSON采用键值对的方式表示数据，其中键是字符串，值可以是字符串、数字、布尔值、数组、对象或者n...
JSON整合JS，JQuery实现数据获取及展示
autumn_leaf blog
10-05 1302
本期博客我们重点介绍如何通过JS以及JQuery获取JSON数据并进行界面的展示，讲解从基础案例开始，逐次递进。 1. ajax传递及返回数据 我们新建一个JsonController类，通过定义一个User实体类，User类包含用户名、密码、手机号三个属性，这里我们为方便测试，就不连接数据库了，我们检验以下两种情况： ①传递非JSON数据，然后返回JSON数据； ②传递JSON数据，返回JSON...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值