获取 geojson 元素到 html table
Get geojson elements into a html table
我是 JS 入门者,我想知道如何将 "ename" 等 geojson 条目插入 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>
我是 JS 入门者,我想知道如何将 "ename" 等 geojson 条目插入 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>