Может кто-нибудь помочь мне получить этот файл JSON в HTML? Все перепробовал

Question

У меня есть большой CSV-файл, который я преобразовал в JSON, и теперь мне нужно показать его на моем HTML-сайте. Я перепробовал все, даже с XML, но он не работает. Может кто-нибудь помочь мне просто показать это на веб-сайте html или, что еще лучше, может быть, кто-то может выбрать атрибуты?

Я попробовал его на своем MacBook или даже на компьютере с Windows, на котором запущен xampp, но он ничего не показывает.

 [
  {
    "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, потому что у нас не было этого в курсе.

Answer 1

Привет, вы можете попробовать вставить данные 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>

The Vanilla 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);
  }
});
}

Так что вы можете использовать это для создания таблицы с нужными вам данными, надеюсь, это поможет