js遍历json对象

最新推荐文章于 2022-08-05 09:56:07 发布
最新推荐文章于 2022-08-05 09:56:07 发布
阅读量80 收藏
点赞数
文章标签： json java
原文链接：https://my.oschina.net/u/3106243/blog/1628020
版权

遍历json对象，初始化dom节点，完成自己定义的导航的页面

可以自行添加一些属性，完成定制化的导航页面

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<link href="imgs/link.png" rel="shortcut icon"/>
		<title>常用链接</title>
		<style>
			#nav > li{ float:left; margin-left:20px; list-style-type:none;}
			.link_list{
				margin-left:0;
				margin-top: 10px;
				padding-left: 0; 
				list-style-type:none;
			}
			a{
				text-decoration: none;
				margin-top:10px;
				font:normal 20px Cursive;
			}
			a.nav_link:link{
				color: blue;
			}
			a.nav_link:hover{
				color: red;
			}
			a.nav_link:active{
				color:black;
			}
			a.nav_link:visited{
				color: blue;
			}
		</style>
		
		
	</head>
	<body>
		
		<script>
			function init_page(){
				var pages = {"API":[{"name":"JDK1-6","link":"http://tool.oschina.net/apidocs/apidoc?api=jdk_6u30","target":"_blank"},
									{"name":"JDK1-7英文","link":"http://tool.oschina.net/apidocs/apidoc?api=jdk_7u4","target":"_blank"},
									{"name":"JDK中文","link":"http://tool.oschina.net/apidocs/apidoc?api=jdk-zh","target":"_blank"}
									]
							"SearchTool":[
									{"name":"Google","link":"https://www.google.com/","target":"_blank"},
									{"name":"Bing","link":"http://cn.bing.com","target":"_blank"},
									{"name":"Baidu","link":"https://www.baidu.com","target":"_blank"}
									],
							target_def :'_blank'
							};
				
				var area = document.createElement("ul");
				area.id = "nav";
				for(var key in pages){
					var links = pages[key];
					if(!(typeof links === 'object')){
						continue;
					}
					var links_dom = document.createElement("ul");
					links_dom.setAttribute("class","link_list");
					var series = document.createElement("li");
					var node = document.createElement("b");
					var text = document.createTextNode(key);
					node.appendChild(text);
					series.appendChild(node);
					for(var i = 0; i < links.length; i++){
						var link = links[i];
						var href = link["link"];
						if(typeof href === 'undefined' || href.length < 1){
							continue;
						}
						var name = link["name"];
						if(typeof name === 'undefined' || name.length < 1){
							name = href;
						}
						var target = link["target"];
						if(typeof target === 'undefined' || target.length < 1){
							target = pages['href_def'];
						}
						var link_dom = document.createElement("li");
						var a_dom = document.createElement("a");
						a_dom.setAttribute("style",".nav_link");
						a_dom.setAttribute("href", href);
						a_dom.setAttribute("target", target);
						var a_text = document.createTextNode(name);
						a_dom.appendChild(a_text);
						link_dom.appendChild(a_dom);
						links_dom.appendChild(link_dom);
						series.appendChild(links_dom);
					}
					area.appendChild(series);
				}
				document.body.appendChild(area);
			}
			init_page();
		</script>
	</body>
</html>

 

转载于:https://my.oschina.net/u/3106243/blog/1628020

chouzhongran3910
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript遍历json对象的key和任意js对象属性实例
10-20
在JavaScript中，遍历JSON对象的键和任意JS对象的属性是常见的操作，尤其是在处理数据和构建动态界面时。本文将详细介绍如何实现这一目标，并通过示例代码进行演示。 首先，JSON（JavaScript Object Notation）是一...
jquery遍历json对象集合详解
01-21
本文实例采用案例分析的方法介绍了jquery遍历json对象的三种情况，供大家参考，具体内容如下 第一个案例：jquery 遍历json对象集合 常用示例 jsp中 $.ajax({ url: ${applicationScope.rootpath}common/...
前端js遍历json对象方法
热门推荐
山鬼谣的专栏
06-07 1万+
环境操作系统： win7情形最近遇到这么一个情况，后台使用LinkedHashMap处理好数据，在使用renderJson()返回数据的时候发现，数据的原有顺序没有了，后来才知道renderJson()方法底层使用Gson据网上说是使用HashMap，所以是无序的。后来，我后台处理采用List<Map>的方式来返回数据，顺序有了，前端遍历的时候，遇到困难。 最开始我是这么遍历的：for(var l
js 遍历json对象
05-17 142
var person={fname:"Bill",lname:"Gates",age:56}; var txt=''; for (x in person) { txt=txt + person[x]; } console.log(txt); }
JS json对象及遍历
u014600844的专栏
06-16 1289
JS对象与json对象区别： JS 对象： var JSobj= { name:"ding";//也可以写成"name":"ding" age:21;//也可以写成"age":21; }   json对象： var json = { "name":"ding"; //不能写成name:”ding”,JSON中的对象和属性都比必须加上双引号。 }   JSON对象和JS对象
js中json对象遍历
v5browser
11-10 85
userCheck = {"emailCheck":false, "nicknameCheck":false, "passwordCheck":false, "password1Check":false, "txtVerifyCodeCheck":false }; function beforeSub(){ for(var key in userCheck){...
jquery动态遍历Json对象的属性和值的方法
12-09
在JavaScript编程中，遍历JSON对象的属性和值是一项常见的任务，这有助于处理和操作数据。jQuery库提供了方便的方式来操作DOM以及处理JavaScript对象，包括JSON。以下是对标题和描述中所述知识点的详细解释： 1. **...
js遍历json对象所有key及根据动态key获取值的方法(必看)
01-19
实例如下： var obj = {}; for(var k in obj) { ...以上这篇js遍历json对象所有key及根据动态key获取值的方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
js遍历数组和遍历对象的区别
lz0426001的专栏
11-17 829
//----------------for用来遍历数组对象-- var i,myArr = [1,2,3]; for (var i = 0; i < myArr.length; i++) { console.log(i+":"+myArr[i]); }; //---------for-in 用来遍历非数组对象 var man ={hands:
js之遍历json对象
admin_mvip的博客
03-11 236
1.无规律的json对象（可以理解为返回的json，不确定key是什么）： &lt;script&gt; var json = [ 　　{dd:'SB',AA:'东东',re1:123}, 　　{cccc:'dd',lk:'1qw'} ]; for(var i=0,l=json.length;i&lt;l;i++){ 　　for(var key in json[i]){ 　　　　alert(k...
JavaScript 遍历JSON对象
11-07 726
[1]遍历JSon对象 function travelJson(jsonObj){ if(jsonObj == null){ return; } for (var item in jsonObj){ if(typeof(jsonObj[item]) == "string"){ alert(item+" "+jsonObj[item]); //...... }e
JS遍历JSON对象（事例）
足迹
09-04 843
Document //JS遍历JSON function jsonfor(){ var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}]; var htmltext="序号nameage"; for(var o in data){ htmltext+=""
js循环遍历json对象
weixin_30488313的博客
03-13 250
<script> var json = {aa:'哈哈',bb:'嘿嘿',cc:'呵呵'}; json.sex='男' for(var a in json){ alert(a+"---"+json[a]) }</script> 转载于:https://www.cnblogs.com/inbeijing/p/8559460.html...
js 对象，json数组遍历
最新发布
m0_71491195的博客
08-05 1946
js 对象，json数组遍历。
JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串
小超人的知识体系
04-02 1万+
JS遍历JSON对象 var jsonObj = { "id": 102, "year": "2019-2020", "label": "2019-2020" }; **JS遍历方法：** for(var p in jsonObj){ alert(jsonObj[p]); } **Jquery遍历方法** $.each(jsonObj,functio...
js 遍历json 对象key value
TUDP
03-29 414
for(var o in data){  var key=o; var value=data[o]; alert("key:"+key+",value:"+ value); }
js和jQuery遍历json对象和数组
zifengye520的专栏
12-11 605
javascript和jQuery遍历数组，json对象和json数组的多种方法。 /* * jquery each()筛选遍历数组 */ function eachArray(){ var anArray = ['zero','one','two']; $.each(anArray,function(index) { console.log(index);
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值