I want to make a dynamic HTML table and fill it with JSON data.

Question

I want to make a table, if anyone of you has watched sports like football, its basically a group of 4 teams, all playing 3 games and I want after each " game round " the points to be displayed and the win/loss, points and so on.
I have already made a fetch of the json data so i can see the array in the console, i just dont know how to display the results in the structure i want to.
in the result in my json array, 1 = 3 points & home win, X = 1 point to both teams and draw, 2 = 3 points and away win.
Would love some ideas.

[
{
"game_round": "1",
"games":
[
{
"game_id": "1",
"team1": "lag_a",
"score1": "3",
"team2": "lag_b",
"score2": "2",
"result": "1"
},
{
"game_id": "2",
"team1": "lag_c",
"score1": "1",
"team2": "lag_d",
"score2": "1",
"result": "X"
}
]
},
{
"game_round": "2",
"games":
[
{
"game_id": "3",
"team1": "lag_a",
"score1": "5",
"team2": "lag_c",
"score2": "1",
"result": "1"
},
{
"game_id": "4",
"team1": "lag_b",
"score1": "0",
"team2": "lag_d",
"score2": "1",
"result": "2"
}
]
},
{
"game_round": "3",
"games":
[
{
"game_id": "5",
"team1": "lag_a",
"score1": "2",
"team2": "lag_d",
"score2": "1",
"result": "1"
},
{
"game_id": "6",
"team1": "lag_b",
"score1": "4",
"team2": "lag_c",

Answer 1

Just an advice.
Use json.parse() to convert json into an array and loop over it and add the data to your table.
Follow these topics if you unclear about something.
JSON: https://www.w3schools.com/jsref/jsref_obj_json.asp
DOM: https://www.w3schools.com/jsref/dom_obj_all.asp

Answer 2

Thanks, I have converted it into an array and i can console log and see the objects, what im struggling with is filling a table with the data i have.