一、json就是“javascript对象表示法”的意思,这里的json数据是从“聚合数据”这个网站获取的。我只截取了一部分,因为原来的内容很多(第一次在这里写文章,不会排版,不要见怪)。
二、遍历一个数组,我用的是
for(var i=0;arrayName.length;i++)这种for循环去遍历。
而遍历一个javascript对象,我用的是
for(var key in objectName)这种for循环去遍历。下面的代码里,一个for循环里面嵌套了几个for循环,虽然阅读起来很困难,但是写起来并不难,在写代码之前先确定好你要遍历的是数组,还是javascript对象就行了。
三、一个javascript对象是由若干个键值对组成的,想要获取键里面的值,有两种方法:
①对象名.键名;
②对象名[“键名”]。
而遍历一个javascript对象的话,只能采用第二种方式,也就是如下方式:
for(var key in objectName)
{
objectName[key];
}
遍历的时候,不能用object.key的原因,就是for循环里面的key本身就是字符串类型的。对象名点一个字符串,是不符合语法的。一般都是“对象名.属性名”或者是“对象名.方法名”这种语法才是正确的。
四、下面是完整的代码。当然要想运行,需要准备jquery-3.2.1.min.js文件,用其他版本的也行。
<html>
<head>
<title>获取json格式的数据</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function ()//入口函数
{
var data={//javascript对象
"resultcode":"200",
"reason":"SUCCESSED!",
"result":[
{
"安徽宿州杨庄":{
"ph":"7.27",
"phquality":"II",
"oxygen":"7.85",
"oxygenquality":"II",
"nitrogen":"0.25",
"nitrogenquality":"II",
"permangan":"2.93",
"permanganquality":"II",
"orgacarbon":"--",
"orgacarbonquality":"II",
"section":"苏-皖省界",
"profile":"安徽宿州杨庄水质自动监测站位于宿州市杨庄乡伊桥村。点位坐标北纬34度03分43秒,东经117度13分12秒。属淮河流域,奎河(苏-皖省界)。由安徽省宿州环境监测站管理。距水站77公里。建于2006年12月。",
"belong":"淮河流域",
"date":"2019-03-15",
"time":"07:58:00"
},
"河南永城黄口":{
"ph":"8.38",
"phquality":"IV",
"oxygen":"8.89",
"oxygenquality":"IV",
"nitrogen":"0",
"nitrogenquality":"IV",
"permangan":"6.4",
"permanganquality":"IV",
"orgacarbon":"--",
"orgacarbonquality":"IV",
"section":"豫-皖省界",
"profile":"河南永城黄口水质自动监测站位于永城市黄口乡浍河闸北。点位坐标经纬度北纬33度56分,东经116度33分。属于淮河水系,浍河(豫-皖省界)。委托永城市环境监测站管理,距水站30公里。建于2006年12月。",
"belong":"淮河流域",
"date":"2019-06-04",
"time":"20:00:00"
}
}
],
"error_code":0
};
for (var key in data)//虽然嵌套了很多for循环,但是并不难理解,也不需要记忆,因为都是根据上面的javascript对象的结构来写的
{
if(key=="result")//只获取键名为"result"里面的数据
{
var array = data[key];
for(var i=0;i<array.length;i++)
{
var obj = array[i];
for(var jian in obj)
{
var zhi = obj[jian];
for(var smallkey in zhi)
{
var smallzhi = zhi[smallkey];
$('#shuju').append("<option>"+smallkey+":"+smallzhi+"</option>");
}
}
}
}
}
});//入口函数的结尾
</script>
</head>
<body>
<select id="shuju">
<option>--请查看--</option>
</select>
</body>
</html>