jq省份城市区街道数据整理成树型json并放到页面供网友选择

懂得数据整理很重要，数据量大的时候如果要手工整理，眼睛估计要罢工，我之前爬取回来的数据，先转成ecxel，需要整理成json才可以在页面使用，之前常用的整理方法如下:在Notepad++编辑软件中（不同的编辑器，正则会有点出入，我习惯使用Notepad++），使用正则替换，查找：(\S+)\s+(\S+)\s+(\S+)\s+(\S+) 替换为：{'key_0':'$1','key_1':'$2','key_2':'$3','key_3':'$4'},就会得到json格式的数据：

数据量少的情况，就可以放到页面使用了，

但是街道数据庞大，我想整理成一棵树，一级只有省份，省份下一级只有城市

这样遍历的次数能比较少，不会造成页面卡顿。一棵树的结构如下：

拼接这份数据，我用的是js，花了不少时间

主要原因还是因为数据量大，json数据格式不熟，最后的代码如下：

 1 <html>
 2     <head>
 3         <meta charset="UTF-8">
 4     </head>
 5 <body>
 6 <script src="https://www1.pcauto.com.cn/test/2104/llf/sp/data.js"></script>
 7 <script>
 8 (function(){
 9     var proI=0,cityI=0,quI=0,jI=0;
10     var pro_String = 'var kxDataProvince = [';
11     var u=0;
12     var k=0;
13     var quL=0;
14     var qcity=0;
15     var j=0;
16     var i=0;
17     var ii=0;
18     var newPro=true;
19     var thisN=1;
20     var isD=true;
21     for(;i<allData.length;i=ii){
22         if(i==0){
23             pro_String =pro_String+'{"ID":"'+proI+'","NAME":"'+allData[i].key_0+'","ITEMS":[{"ID":"'+cityI+'","NAME":"'+allData[i].key_1+'","ITEMS":[{"ID":"'+quI+'","NAME":"'+allData[i].key_2+'","ITEMS":[{"ID":"'+jI+'","NAME":"'+allData[i].key_3+'"}';
24             proI++;
25             cityI++;
26             quI++;
27             jI++;
28             ii++;
29         }else{
30             if(allData[i].key_0==allData[i-1].key_0){
31                 if(allData[i].key_1==allData[i-1].key_1){
32                     if(allData[i].key_2==allData[i-1].key_2){
33                         pro_String =pro_String+','+'{"ID":"'+jI+'","NAME":"'+allData[i].key_3+'"}';
34                         jI++;
35                     }else{
36                         pro_String =pro_String+']}';
37                         pro_String =pro_String+',{"ID":"'+quI+'","NAME":"'+allData[i].key_2+'"'+',"ITEMS":[{"ID":"'+jI+'","NAME":"'+allData[i].key_3+'"}';
38                         quI++;
39                         jI++;
40                     }
41                 }else{
42                     pro_String =pro_String+']}]}';
43                     pro_String =pro_String+',{"ID":"'+cityI+'","NAME":"'+allData[i].key_1+'"'+',"ITEMS":[{"ID":"'+quI+'","NAME":"'+allData[i].key_2+'"'+',"ITEMS":[{"ID":"'+jI+'","NAME":"'+allData[i].key_3+'"}';
44                     cityI++;
45                     quI++;
46                     jI++;
47                 }
48             }else{
49                 pro_String =pro_String+']}]}]}';
50                 pro_String =pro_String+',{"ID":"'+proI+'","NAME":"'+allData[i].key_0+'"'+',"ITEMS":[{"ID":"'+cityI+'","NAME":"'+allData[i].key_1+'"'+',"ITEMS":[{"ID":"'+quI+'","NAME":"'+allData[i].key_2+'"'+',"ITEMS":[{"ID":"'+jI+'","NAME":"'+allData[i].key_3+'"}';
51                 proI++;
52                 cityI++;
53                 quI++;
54                 jI++;
55             }
56             ii++
57         }
58     }
59     pro_String=pro_String+"]}]}";
60     pro_String=pro_String+"]}]";
61     document.write(pro_String);
62     document.write("<br>");
63 
64 
65 
66 })();
67 </script>
68 </body>
69 </html>

运行之后，得到的就是一颗树了：

https://www1.pcauto.com.cn/test/2104/llf/sp/areaSsqjAll.js

然后在页面上使用就很方便了，我用的是jq:

1 <textarea onClick="getProvinceBuy()" class="adressText shengshi" style="height:0.7rem;" type="text" placeholder="省、市、区、街道"></textarea>

  1 $(".shengshi").focus(function(){
  2     document.activeElement.blur();
  3 });
  4 function getByteLen(val) {
  5     var len = 0;
  6     for (var i = 0; i < val.length; i++) {
  7          var a = val.charAt(i);
  8          if (a.match(/[^\x00-\xff]/ig) != null) 
  9         {
 10             len += 2;
 11         }
 12         else
 13         {
 14             len += 1;
 15         }
 16     }
 17     return len;
 18 }
 19 
 20 //加载省份
 21 function getProvinceBuy(){
 22     if($(".shengshi").val()!=""){
 23         $(".shengshi").val="";
 24     }
 25     $("body .dqld_div").remove();
 26     var province=eval(proStr);
 27     var newStr=new Array();
 28     newStr.push("<div class=\"dqld_div\" style=\"\"><ul>");
 29     for(var i=0,psize=province.length;i<psize;i++){
 30         newStr.push("<li onclick=\"getCityBuy("+i+")\">"+province[i].NAME+"</li>");
 31     }
 32     newStr.push("</ul></div>");
 33     $("body").append(newStr.join(""));
 34     }
 35 //加载城市
 36 function getCityBuy(val){
 37     var province=eval(proStr);
 38     var city=eval(province[val].ITEMS);
 39     var newStr=new Array();
 40     newStr.push("<div class=\"dqld_div\"><ul>");
 41     newStr.push("<li onclick=\"getProvinceBuy()\" style=\"margin-left: -2rem;\">"+province[val].NAME+"</li>");
 42     for(var j=0,csize=city.length;j<csize;j++){
 43         newStr.push("<li onclick=\"getAreaBuy("+j+","+val+")\"  style=\"padding-left:20px;\">"+city[j].NAME+"</li>");
 44     }
 45     newStr.push("</ul></div>");
 46     $("body .dqld_div").remove();
 47     $("body").append(newStr.join(""));
 48 }
 49 //加载区
 50 function getAreaBuy(val,val1){
 51     // val是城市id  val1是省份id
 52     var province=eval(proStr);
 53     var city=eval(province[val1].ITEMS);
 54     var area=eval(city[val].ITEMS);
 55     var newStr=new Array();
 56     newStr.push("<div class=\"dqld_div\"><ul>");
 57     newStr.push("<li onclick=\"getProvinceBuy()\" style=\"margin-left: -2rem;\">"+province[val1].NAME+"</li>");
 58     newStr.push("<li onclick=\"getCityBuy("+val1+")\" style=\"margin-left: -1.5rem;\">"+city[val].NAME+"</li>");
 59     for(var t=0,asize=area.length;t<asize;t++){
 60         // newStr.push("<li  style=\"padding-left:25px;\" onclick=\"getallArea("+val1+","+val+","+t+")\">"+area[t].NAME+"</li>");
 61         newStr.push("<li  style=\"padding-left:25px;\" onclick=\"getJieArea("+t+","+val+","+val1+")\">"+area[t].NAME+"</li>");
 62     }
 63     newStr.push("</ul></div>");
 64     if(asize==0){
 65         var allarea=province[val1].NAME+city[val].NAME;
 66         $(".shengshi").attr({"SS":province[val1].NAME,"SQ":city[val].NAME,"XS":""});
 67         $(".shengshi").val(allarea);
 68         
 69         $("body .dqld_div").remove();
 70     }
 71     else{
 72         $("body .dqld_div").remove();
 73         $("body").append(newStr.join(""));
 74     }
 75 }
 76 //加载街道
 77 function getJieArea(val,val1,val2){
 78     //val是区  val1是城市，val2是省
 79     var province=eval(proStr);
 80     var city=eval(province[val2].ITEMS);
 81     var area=eval(city[val1].ITEMS);
 82     var jie=eval(area[val].ITEMS);
 83     var newStr=new Array();
 84     newStr.push("<div class=\"dqld_div\"><ul>");
 85     newStr.push("<li onclick=\"getProvinceBuy()\" style=\"margin-left: -2rem;\">"+province[val2].NAME+"</li>");
 86     newStr.push("<li onclick=\"getCityBuy("+val2+")\" style=\"margin-left: -1.5rem;\">"+city[val1].NAME+"</li>");
 87     newStr.push("<li onclick=\"getAreaBuy("+val1+","+val2+")\" style=\"margin-left: -1rem;\">"+area[val].NAME+"</li>");
 88     for(var t=0,asize=jie.length;t<asize;t++){
 89         // newStr.push("<li  style=\"padding-left:25px;\" onclick=\"getallArea("+val1+","+val+","+t+")\">"+area[t].NAME+"</li>");
 90         newStr.push("<li  style=\"padding-left:25px;\" onclick=\"getallArea("+t+","+val+","+val1+","+val2+")\">"+jie[t].NAME+"</li>");
 91     }
 92     newStr.push("</ul></div>");
 93     if(asize==0){
 94         var allarea=province[val1].NAME+city[val].NAME;
 95         $(".shengshi").attr({"SS":province[val1].NAME,"SQ":city[val].NAME,"XS":""});
 96         $(".shengshi").val(allarea);
 97         
 98         $("body .dqld_div").remove();
 99     }
100     else{
101         $("body .dqld_div").remove();
102         $("body").append(newStr.join(""));
103     }
104 }
105 //返回选择的省城市区街道
106 function getallArea(val,val1,val2,val3){
107     //val是街道，val1是区  val2是城市，val3是省
108     var province=eval(proStr);
109     var city=eval(province[val3].ITEMS);
110     var area=eval(city[val2].ITEMS);
111     var jie=eval(area[val1].ITEMS);
112     var allarea=province[val3].NAME+city[val2].NAME+area[val1].NAME+jie[val].NAME;
113     $(".thisX").hide();
114     $(".shengshi").val(allarea);
115     var l=getByteLen(allarea);
116     if(l>28){
117         $(".shengshi").css("lineHeight","0.35rem");
118     }else{
119         $(".shengshi").css("lineHeight","0.7rem");
120     }
121     $("body .dqld_div").remove();
122 }

 1 <style>
 2  .dqld_div{
 3         width: 100%;
 4         position: fixed;
 5         bottom: 0;
 6         height: 6rem;
 7         background: white;
 8         z-index: 33333;
 9         text-align: center;
10         background: white;
11         color: black;
12         overflow: scroll;
13         border-top-left-radius: 29px;
14         border-top-right-radius: 29px;
15 
16     }
17     .dqld_div ul{
18         width:100%;
19     }
20 
21     .dqld_div ul li{
22         height:35px;
23         line-height:35px;
24     }
25 </style>

得到的效果如下图：

至此，终于完成了任务。

posted @ 2021-04-27 14:36 北倍阅读(719) 评论(0) 编辑收藏举报

北倍

小小的程序员，慢慢成长。
淘宝小店，欢迎光临!

jq省份城市区街道数据整理成树型json并放到页面供网友选择

公告

北倍

小小的程序员，慢慢成长。 淘宝小店，欢迎光临!

jq省份城市区街道数据整理成树型json并放到页面供网友选择

公告

小小的程序员，慢慢成长。
淘宝小店，欢迎光临!