Just starting out with JavaScript and struggling a bit.
We need to fetch data from this URL:
and then manipulate the data to create new rows (tr) and columns (td) for each game without altering the HTML file. The desired outcome should resemble this: https://i.sstatic.net/3ejGx.png
I'm having trouble understanding how to iterate through the data and utilize it effectively.
import {getData} from './getdata.js';
let data = getData();
event();
function createTR(text) {
var x = document.createElement("TR");
x.setAttribute("class", "myTr");
document.getElementById("table").appendChild(x);
var y = document.createElement("TD");
var t = document.createTextNode(text);
y.appendChild(t);
document.querySelector(".myTr").appendChild(y);
}
function event() {
document.querySelector('#active').addEventListener('click', myFunction);
}
function myFunction() {
data.then(createTR);
}
export function getData() {
return fetch('https://stryk.herokuapp.com/tipset')
.then(function (response) {
return response.json();
})
.then(function (data) {
console.dir(data);
});
}