用Jquery获取json中的数据并显示到下拉列表当中

川长思鸟来 2023-06-19 02:22 74阅读 0赞

一、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>