fetch('./js/Meteorite_Landings.json')
    .then((response) => response.json())
    .then(data => {
        console.log(data);
        const tableBody = document.getElementById("meteorTableBody");
        data.splice(0,500).forEach(meteor => { // Just get 500 values for now
            const row = document.createElement("tr");
            const id = document.createElement("td");
            id.textContent = meteor.id ?? "-";
            const name = document.createElement("td");
            name.textContent = meteor.name ?? "-";
            const year = document.createElement("td");
            year.textContent = meteor.year ?? "-";
            const recclass = document.createElement("td");
            recclass.textContent = meteor.recclass ?? "-";
            const mass = document.createElement("td");
            mass.textContent = meteor["mass (g)"] + "g" ?? "-";
            row.append(id, name, year, recclass, mass);
            tableBody.appendChild(row);
        })
    })
    .catch(error => console.error(error));