您的位置：首页 > Web前端 > JavaScript

js提取数组，对象，json数据，创建表格，列表

2018-03-24 10:20 621 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="zh">
<title>demo</title>
<style>
*{margin:0;padding:0;}
table{border-collapse: collapse;border-spacing: 0;border-color: #ccc;}
td{border:1px solid #333;padding:5px 10px;text-align:left;}
</style>
</head>
<body>
<button type="button" onclick="arrFun(arrTem)">Test array</button>
<button type="button" onclick="jsonFun()">Test json</button>
<button type="button" onclick="objFun()">Test obj</button>
<div id="arr"></div>
<div id="json"></div>
<div id="obj"></div>
<script>
function $(id){
return document.getElementById(id);
}
//array二维数组
var arrTem = [
["张三","12","男"],
["李四","2343","女"],
["王五","34","男"]
];

function arrFun(arr){ //传参
var str = "";
for(var i=0;i<arr.length;i++){
var num = i+1;
str += "<tr><td>"+"N"+num+"</td>";
for(var j=0;j<arr[i].length;j++){
str += "<td>"+arr[i][j]+"</td>";
}
str += "</tr>";
}
$("arr").innerHTML = "<table>"+ str +"</table>";
}
//json 使用onchange事件。完成省，市，县连表(未做)
var json1 = '{"江西":["南昌","九江","景德镇"],"浙江":["杭州","宁波","温州"],"江苏":["苏州","南京","南通"]}';//字符串不能换行写
//object
var object = {"江西":["南昌","九江","景德镇"],"浙江":["杭州","宁波","温州"],"江苏":["苏州","南京","南通"]};
console.log(typeof json1);//string  //ajax获取到的数据是string
function jsonFun(){
var obj =JSON.parse(json1);
var str = "";
var arr = Object.keys(obj);//arr是一个键值组成的数组//或者遍历对象，加length
//var arr = Object.keys(obj);将key提取并存为一个数组
//alert(obj.江西.length);//测量能实现
//alert(obj.arr[0].length);//失败
for( x in obj){ 		//要用for( x in obj)来使用
console.log(obj[x]);//obj[x]是一个数组
console.log("end");
str += "<ul><h1>"+x+"</h1>";//obj[x]所给出的值为key:x的所有value,因此这利用x
for(var j=0;j<obj[x].length;j++){
str += "<li>"+ obj[x][j] +"</li>";
}
str +="</ul>";
}
$("json").innerHTML = str;
}

v
4000
ar json2 = '{"江西":{"南昌":"江西省会","九江":"长江","景德镇":"陶瓷"},"浙江":{"杭州":"浙江省会","宁波":"沿海城市","温州":"皮鞋厂"},"江苏":{"苏州":"江苏省会","南京":"中山陵","南通":"启东"}}';
function objFun(){
var obj =JSON.parse(json2);
var str = "";
var arr = Object.keys(obj);
for( x in obj){
console.log(x);
console.log("start");
console.log(obj[x]);//obj[x]是一个数组
console.log("end");
str += "<ul><h1>"+x+"</h1>";//obj[x]所给出的值为key:x的所有value,因此这利用x
for( y in obj[x]){
str += "<li><a>" + y +":"+ obj[x][y] + "</a></li>";
}
str +="</ul>";
}
$("obj").innerHTML = str;
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航