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

最新推荐文章于 2024-04-19 10:18:52 发布

YSoup

最新推荐文章于 2024-04-19 10:18:52 发布

阅读量800

点赞数

分类专栏： javascript 文章标签： javascript json

本文链接：https://blog.csdn.net/Deep_rooted/article/details/103378765

版权

javascript 专栏收录该内容

8 篇文章 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>

YSoup

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用Jquery获取json中的数据并显示到下拉列表当中

json数据是从“聚合数据”这个网站获取的。我只截取了一部分，因为原来的内容很多。遍历一个数组，我用的是for(var i=0;arrayName.length;i++)这种for循环去遍历。而遍历一个javascript对象，我用的是for(var key in object)这种for循环去遍历。一个javascript对象是有若干个键值对组成的，想要获取键里面的值，有两种方法。①对象名....
复制链接

扫一扫