前端具体实现用城市数据的json来渲染成地址列表
首先，需要获取城市数据的json文件。可以从第三方数据源获取，或者自己创建一个json文件。这里以自己创建一个json文件为例，文件内容如下：
{
"provinces": [
{
"name": "北京市",
"cities": [
{
"name": "北京市",
"areas": [
"东城区",
"西城区",
"朝阳区",
"丰台区",
"石景山区",
"海淀区",
"门头沟区",
"房山区",
"通州区",
"顺义区",
"昌平区",
"大兴区",
"怀柔区",
"平谷区",
"密云区",
"延庆区"
]
}
]
},
{
"name": "上海市",
"cities": [
{
"name": "上海市",
"areas": [
"黄浦区",
"徐汇区",
"长宁区",
"静安区",
"普陀区",
"虹口区",
"杨浦区",
"闵行区",
"宝山区",
"嘉定区",
"浦东新区",
"金山区",
"松江区",
"青浦区",
"奉贤区",
"崇明区"
]
}
]
},
{
"name": "广东省",
"cities": [
{
"name": "广州市",
"areas": [
"荔湾区",
"越秀区",
"海珠区",
"天河区",
"白云区",
"黄埔区",
"番禺区",
"花都区",
"南沙区",
"增城区",
"从化区"
]
},
{
"name": "深圳市",
"areas": [
"罗湖区",
"福田区",
"南山区",
"宝安区",
"龙岗区",
"盐田区"
]
},
{
"name": "珠海市",
"areas": [
"香洲区",
"斗门区",
"金湾区"
]
}
]
}
]
}
然后，在前端页面中引入这个json文件，并使用JavaScript来解析数据，并渲染成地址列表。代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地址列表</title>
<script src="data.json"></script>
</head>
<body>
<ul id="address-list"></ul>
<script>
var addressList = document.getElementById('address-list');
var provinces = data.provinces;
for (var i = 0; i < provinces.length; i++) {
var province = provinces[i];
var provinceName = province.name;
var cities = province.cities;
for (var j = 0; j < cities.length; j++) {
var city = cities[j];
var cityName = city.name;
var areas = city.areas;
var cityNode = document.createElement('li');
cityNode.innerText = provinceName + ' ' + cityName;
var areaNode = document.createElement('ul');
for (var k = 0; k < areas.length; k++) {
var area = areas[k];
var areaNodeItem = document.createElement('li');
areaNodeItem.innerText = area;
areaNode.appendChild(areaNodeItem);
}
cityNode.appendChild(areaNode);
addressList.appendChild(cityNode);
}
}
</script>
</body>
</html>
解析json文件后，通过循环遍历数据，依次创建省市区的节点，并将节点添加到地址列表中。其中，省市节点使用<li>标签表示，区节点使用<ul>和<li>标签表示。最终渲染出来的效果如下：
北京市 北京市
东城区
西城区
朝阳区
丰台区
石景山区
海淀区
门头沟区
房山区
通州区
顺义区
昌平区
大兴区
怀柔区
平谷区
密云区
延庆区
上海市 上海市
黄浦区
徐汇区
长宁区
静安区
普陀区
虹口区
杨浦区
闵行区
宝山区
嘉定区
浦东新区
金山区
松江区
青浦区
奉贤区
崇明区
广东省 广州市
荔湾区
越秀区
海珠区
天河区
白云区
黄埔区
番禺区
花都区
南沙区
增城区
从化区
广东省 深圳市
罗湖区
福田区
南山区
宝安区
龙岗区
盐田区
广东省 珠海市
香洲区
斗门区
金湾区
以上就是用城市数据的json来渲染成地址列表的具体实现过程。
原文地址: http://www.cveoy.top/t/topic/bLBw 著作权归作者所有。请勿转载和采集!