我有一个很大的csv文件，我将其转换为json，现在我需要在html网站上显示它。我尝试了所有操作，即使使用xml也不行。谁能帮我在html网站上显示它，甚至更好的也许是可以选择属性？
我在Macbook或什至在运行xampp的Windows pc上都尝试过，但是它什么也没显示。
[
{
"ID": 1,
"Site": "A 1",
"Longitude UTM": 446253.881,
"Latitude UTM": 7657736.83,
"Elevation": 1343.3374,
"Gorge": "Amis",
"Site Nickname": "",
"Discoverer": "",
"Date of Discovery": "",
"Publication": "Pager; Harald: The Rock Paintings of the Upper Brandberg; Part 1 � Amis Gorge. Africa Praehistorica 1 (K�ln: Heinrich Barth Institut); 1989.",
"ISBN 10": "3-927688-01-0",
"Site Pager": "A 1",
"Number of Figures": 44,
"Figure Category": 4,
"Distance to next Site": 590.7813,
"Next Site": "A 4",
"Cardinal Points": "SE",
"Painting Location": "5; 6",
"Water in Sight": "",
"Water Availability": ">300m",
"Open Field in Sight": "",
"Open Field": "adjacent",
"Living Place": "unfavourable",
"Spatiality": 19,
"Visibility": "<15m",
"Context": "isolated",
"View from Site": "magnificent",
"Evidence of Human Occupation": "NA",
"Degradation of Paintings": "NA",
"Quantity of Artefacts": "medium quantity",
"Lithics": "NA",
"Pottery": "NA",
"O.E.S.": "NA",
"Bone": "NA",
"Charcoal": "NA",
"Grinding Implements": "NA",
"Stone Structures": "NA",
"Miscellenous Artefact": "NA",
"Remarks": ""
},
{
"ID": 2,
"Site": "A 2",
"Longitude UTM": 447469.166,
"Latitude UTM": 7657906.65,
"Elevation": 1349.5029,
"Gorge": "Amis",
"Site Nickname": "",
"Discoverer": "",
"Date of Discovery": "",
"Publication": "Pager; Harald: The Rock Paintings of the Upper Brandberg; Part 1 � Amis Gorge. Africa Praehistorica 1 (K�ln: Heinrich Barth Institut); 1989.",
"ISBN 10": "3-927688-01-0",
"Site Pager": "A 2",
"Number of Figures": 91,
"Figure Category": 3,
"Distance to next Site": 43.481,
"Next Site": "A 3",
"Cardinal Points": "NW",
"Painting Location": "5; 8; 11",
"Water in Sight": "",
"Water Availability": "within shouting distance",
"Open Field in Sight": "True",
"Open Field": "within shouting distance",
"Living Place": "spacious",
"Spatiality": 16,
"Visibility": "<15m",
"Context": "marginal",
"View from Site": "poor",
"Evidence of Human Occupation": "NA",
"Degradation of Paintings": "NA",
"Quantity of Artefacts": "none",
"Lithics": "NA",
"Pottery": "NA",
"O.E.S.": "NA",
"Bone": "NA",
"Charcoal": "NA",
"Grinding Implements": "NA",
"Stone Structures": "NA",
"Miscellenous Artefact": "NA",
"Remarks": ""
} ]
最好没有jquery，因为我们当然没有这个。
答案 0 :(得分：0)
嗨，您可以尝试将json数据嵌入到html表中，这是此jsfiddle上的示例，其中包含来自json的几列：
html结构：
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th>id</th>
<th>Site</th>
<th>Longitude</th>
<th>Latitude</th>
<th>Elevation</th>
<th>Publication</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
<button id="btnLoad" class="btn-default">Load</button>
香草js：
let json = [ { "ID": 1, "Site": "A 1", "Longitude UTM": 446253.881, "Latitude UTM": 7657736.83, "Elevation": 1343.3374, "Gorge": "Amis", "Site Nickname": "", "Discoverer": "", "Date of Discovery": "", "Publication": "Pager; Harald: The Rock Paintings of the Upper Brandberg; Part 1 � Amis Gorge. Africa Praehistorica 1 (K�ln: Heinrich Barth Institut); 1989.", "ISBN 10": "3-927688-01-0", "Site Pager": "A 1", "Number of Figures": 44, "Figure Category": 4, "Distance to next Site": 590.7813, "Next Site": "A 4", "Cardinal Points": "SE", "Painting Location": "5; 6", "Water in Sight": "", "Water Availability": ">300m", "Open Field in Sight": "", "Open Field": "adjacent", "Living Place": "unfavourable", "Spatiality": 19, "Visibility": "<15m", "Context": "isolated", "View from Site": "magnificent", "Evidence of Human Occupation": "NA", "Degradation of Paintings": "NA", "Quantity of Artefacts": "medium quantity", "Lithics": "NA", "Pottery": "NA", "O.E.S.": "NA", "Bone": "NA", "Charcoal": "NA", "Grinding Implements": "NA", "Stone Structures": "NA", "Miscellenous Artefact": "NA", "Remarks": "" }, { "ID": 2, "Site": "A 2", "Longitude UTM": 447469.166, "Latitude UTM": 7657906.65, "Elevation": 1349.5029, "Gorge": "Amis", "Site Nickname": "", "Discoverer": "", "Date of Discovery": "", "Publication": "Pager; Harald: The Rock Paintings of the Upper Brandberg; Part 1 � Amis Gorge. Africa Praehistorica 1 (K�ln: Heinrich Barth Institut); 1989.", "ISBN 10": "3-927688-01-0", "Site Pager": "A 2", "Number of Figures": 91, "Figure Category": 3, "Distance to next Site": 43.481, "Next Site": "A 3", "Cardinal Points": "NW", "Painting Location": "5; 8; 11", "Water in Sight": "", "Water Availability": "within shouting distance", "Open Field in Sight": "True", "Open Field": "within shouting distance", "Living Place": "spacious", "Spatiality": 16, "Visibility": "<15m", "Context": "marginal", "View from Site": "poor", "Evidence of Human Occupation": "NA", "Degradation of Paintings": "NA", "Quantity of Artefacts": "none", "Lithics": "NA", "Pottery": "NA", "O.E.S.": "NA", "Bone": "NA", "Charcoal": "NA", "Grinding Implements": "NA", "Stone Structures": "NA", "Miscellenous Artefact": "NA", "Remarks": "" } ];
document.getElementById('btnLoad').onclick = function (event){
console.log("hello");
json.forEach(function(element) {
if(element.ID != undefined){
var tr = document.createElement("tr");
var tdId = document.createElement("td");
var tdSite = document.createElement("td");
var tdLon = document.createElement("td");
var tdLat = document.createElement("td");
var tdElevation = document.createElement("td");
var tdPublication = document.createElement("td");
tdId.appendChild(document.createTextNode(element.ID));
tdSite.appendChild(document.createTextNode(element.Site));
tdLon.appendChild(document.createTextNode(element["Longitude UTM"]));
tdLat.appendChild(document.createTextNode(element["Latitude UTM"]));
tdElevation.appendChild(document.createTextNode(element.Elevation));
tdPublication.appendChild(document.createTextNode(element.Publication));
tr.appendChild(tdId);
tr.appendChild(tdSite);
tr.appendChild(tdLon);
tr.appendChild(tdLat);
tr.appendChild(tdElevation);
tr.appendChild(tdPublication);
document.getElementById('tableBody').appendChild(tr);
}
});
}
因此，您可以使用它来创建包含所需数据的表，希望对您有所帮助