获取geojson元素到html表中
Get geojson elements into a html table
我是一个js初学者，有一个问题，如何插入geojson条目，如" name"等到html-table:
<table id="jsoncontent"></table>
<script type="text/javascript">
window.onload = function () {
var golfdata = $.getJSON('golf.js');
document.getElementById("jsoncontent").innerHtml = '<p>'
golfdata.properties.[ename] + '</p>';
};
</script>
<script src='data/data.js'></script>
geojson (data.js)有这样的内容:
var golf = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": {
"name":"urn:ogc:def:crs:OGC:1.3:CRS84" }
},
"features": [
{ "type": "Feature", "properties": { "ename": "PGA Championship", "efdate": "10.08.2015", "etdate": "16.08.2016", "esportcat": "Golf", "elocnam": "Whistling Straits", "elocstree": "N8501 County Road LS", "ecity": "Sheboygan", "eloczip": "WI 53083", "elocland": "USA", "eclubnam": null, "elink": "http:'/'/www.pga.com'/pgachampionship'/", "addrtype": "street_address", "addrlocat": "ROOFTOP" }, "geometry": { "type": "Point", "coordinates": [ -87.7351084, 43.8509493 ] } },
{ "type": "Feature", "properties": { "ename": "Ryder Cup 2016", "efdate": "01.09.2016", "etdate": "02.10.2016", "esportcat": "Golf", "elocnam": "Hazeltine National Golf Course", "elocstree": "1900 Hazeltine Blvd", "ecity": "Chaska", "eloczip": "MN 55318", "elocland": "USA", "eclubnam": null, "elink": "http:'/'/www.rydercup.com'/", "addrtype": "street_address", "addrlocat": "ROOFTOP" }, "geometry": { "type": "Point", "coordinates": [ -93.5908194, 44.833729 ] } },
{ "type": "Feature", "properties": { "ename": "2015 Toshiba Classic", "efdate": "26.10.2015", "etdate": "01.11.2015", "esportcat": "Golf", "elocnam": "Newport Beach Country Club", "elocstree": "1600 East Coast Hwy", "ecity": "Newport Beach", "eloczip": "CA 92660", "elocland": "California, USA", "eclubnam": "Newport Beach Country Club", "elink": "http:'/'/www.toshibaclassic.com'/", "addrtype": "street_address", "addrlocat": "ROOFTOP" }, "geometry": { "type": "Point", "coordinates": [ -117.8829118, 33.615317 ] } },
{ "type": "Feature", "properties": { "ename": "HSBC Champions", "efdate": "04.11.2015", "etdate": "08.11.2015", "esportcat": "Golf", "elocnam": "Sheshan International Golf Club", "elocstree": "288 Linyin New Rd", "ecity": "Shanghai", "eloczip": null, "elocland": "China", "eclubnam": "Sheshan International Golf Club", "elink": "http:'/'/www.worldgolfchampionships.com'/hsbc-champions.html", "addrtype": "street_address", "addrlocat": "ROOFTOP" }, "geometry": { "type": "Point", "coordinates": [ 121.22203, 31.104027 ] } },
{ "type": "Feature", "properties": { "ename": "Cadillac Championship", "efdate": "02.03.2016", "etdate": "06.03.2016", "esportcat": "Golf", "elocnam": "Trump National Doral Miami", "elocstree": "4400 N.W. 87th Avenue", "ecity": "Miami", "eloczip": "FL 33178", "elocland": "USA", "eclubnam": "Trump National Doral Golf Club", "elink": "http:'/'/www.worldgolfchampionships.com'/cadillac-championship.html", "addrtype": "street_address", "addrlocat": "ROOFTOP" }, "geometry": { "type": "Point", "coordinates": [ -80.3395621, 25.814003 ] } },
{ "type": "Feature", "properties": { "ename": "Dell Match Play", "efdate": "23.03.2016", "etdate": "27.03.2016", "esportcat": "Golf", "elocnam": "Austin Country Club", "elocstree": "4408 Long Champ Dr", "ecity": "Austin", "eloczip": "TX 78746", "elocland": "USA", "eclubnam": "Austin Country Club", "elink": "http:'/'/www.worldgolfchampionships.com'/dell-match-play.html", "addrtype": "street_address", "addrlocat": "ROOFTOP" }, "geometry": { "type": "Point", "coordinates": [ -97.7975758, 30.3425085 ] } }
]
}
您需要的可能是:
window.onload = function() {
var golfdata = $.getJSON("golf.js");
golfdata.features.forEach(function(entry) {
document.getElementById("jsoncontent").innerHTML += "<tr><td>" + entry.ename + "</td></tr>";
});
};
我将提供更完整的解决方案，请稍等。
var golfdata = {
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature",
"properties": {
"ename": "PGA Championship",
"efdate": "10.08.2015",
"etdate": "16.08.2016",
"esportcat": "Golf",
"elocnam": "Whistling Straits",
"elocstree": "N8501 County Road LS",
"ecity": "Sheboygan",
"eloczip": "WI 53083",
"elocland": "USA",
"eclubnam": null,
"elink": "http:'/'/www.pga.com'/pgachampionship'/",
"addrtype": "street_address",
"addrlocat": "ROOFTOP"
},
"geometry": {
"type": "Point",
"coordinates": [-87.7351084, 43.8509493]
}
},
{
"type": "Feature",
"properties": {
"ename": "Ryder Cup 2016",
"efdate": "01.09.2016",
"etdate": "02.10.2016",
"esportcat": "Golf",
"elocnam": "Hazeltine National Golf Course",
"elocstree": "1900 Hazeltine Blvd",
"ecity": "Chaska",
"eloczip": "MN 55318",
"elocland": "USA",
"eclubnam": null,
"elink": "http:'/'/www.rydercup.com'/",
"addrtype": "street_address",
"addrlocat": "ROOFTOP"
},
"geometry": {
"type": "Point",
"coordinates": [-93.5908194, 44.833729]
}
},
{
"type": "Feature",
"properties": {
"ename": "2015 Toshiba Classic",
"efdate": "26.10.2015",
"etdate": "01.11.2015",
"esportcat": "Golf",
"elocnam": "Newport Beach Country Club",
"elocstree": "1600 East Coast Hwy",
"ecity": "Newport Beach",
"eloczip": "CA 92660",
"elocland": "California, USA",
"eclubnam": "Newport Beach Country Club",
"elink": "http:'/'/www.toshibaclassic.com'/",
"addrtype": "street_address",
"addrlocat": "ROOFTOP"
},
"geometry": {
"type": "Point",
"coordinates": [-117.8829118, 33.615317]
}
},
{
"type": "Feature",
"properties": {
"ename": "HSBC Champions",
"efdate": "04.11.2015",
"etdate": "08.11.2015",
"esportcat": "Golf",
"elocnam": "Sheshan International Golf Club",
"elocstree": "288 Linyin New Rd",
"ecity": "Shanghai",
"eloczip": null,
"elocland": "China",
"eclubnam": "Sheshan International Golf Club",
"elink": "http:'/'/www.worldgolfchampionships.com'/hsbc-champions.html",
"addrtype": "street_address",
"addrlocat": "ROOFTOP"
},
"geometry": {
"type": "Point",
"coordinates": [121.22203, 31.104027]
}
},
{
"type": "Feature",
"properties": {
"ename": "Cadillac Championship",
"efdate": "02.03.2016",
"etdate": "06.03.2016",
"esportcat": "Golf",
"elocnam": "Trump National Doral Miami",
"elocstree": "4400 N.W. 87th Avenue",
"ecity": "Miami",
"eloczip": "FL 33178",
"elocland": "USA",
"eclubnam": "Trump National Doral Golf Club",
"elink": "http:'/'/www.worldgolfchampionships.com'/cadillac-championship.html",
"addrtype": "street_address",
"addrlocat": "ROOFTOP"
},
"geometry": {
"type": "Point",
"coordinates": [-80.3395621, 25.814003]
}
},
{
"type": "Feature",
"properties": {
"ename": "Dell Match Play",
"efdate": "23.03.2016",
"etdate": "27.03.2016",
"esportcat": "Golf",
"elocnam": "Austin Country Club",
"elocstree": "4408 Long Champ Dr",
"ecity": "Austin",
"eloczip": "TX 78746",
"elocland": "USA",
"eclubnam": "Austin Country Club",
"elink": "http:'/'/www.worldgolfchampionships.com'/dell-match-play.html",
"addrtype": "street_address",
"addrlocat": "ROOFTOP"
},
"geometry": {
"type": "Point",
"coordinates": [-97.7975758, 30.3425085]
}
}
]
};
window.onload = function() {
// var golfdata = $.getJSON("golf.js");
document.getElementById("jsoncontent").innerHTML = "<tr><th>ename</th><th>elocnam</th>";
golfdata.features.forEach(function(entry) {
document.getElementById("jsoncontent").innerHTML += "<tr><td>" + entry.properties.ename + "</td><td>" + entry.properties.elocnam + "</td></tr>";
});
};<table id="jsoncontent"></table>相关文章：
- 将行添加到具有固定标题的HTML表中
- 如何使用Javascript在HTML表中查找第一个空行
- 需要将单元格值复制到html表中的其他单元格中
- 如何在html表中插入多个相同的图像
- 从html表中的输入数据创建图表
- Javascript在HTML表中输出在线用户名
- 如何使用 Backbone 将多条记录呈现到 html 表中.js .
- 通过javascript/jquery从html表中获取值并进行计算
- jQuery对象从html表中查询为两个一维数组，用于Chartist图表
- 在HTML表中插入时立即触发操作
- 如何使用javascript在html表中删除字符串
- 如何使用JavaScript检查HTML表中插入的值的类型
- 使用'从HTML表中提取行的内容<tr onclick=alertContents(）>'
- 使用regex从巨大的html表中查找某些td值
- 计数HTML表中筛选的结果
- 如何在单击行时获取html表中第一列的值
- 如何比较单元格值和隐藏 html 表中的行
- 从 html 表中选择一行(突出显示）并在单击按钮时发送值
- 当输入字段位于 HTML 表中且其类型为“隐藏”时进行表单验证
- 如何在动态生成的 HTML 表中使用 2D 数组在 TD 标签中设置值
