I’m facing challenges in creating a dynamic table from JSON data using JavaScript. I’ve attempted several approaches, but none seem to be working as expected. Essentially, I’m trying to populate a table dynamically based on the data provided in JSON format. Despite my efforts, I’m unable to achieve the desired outcome.
What I’ve Tried:
I attempted to iterate through the JSON data using JavaScript and dynamically create table rows and cells accordingly.
I explored various JavaScript libraries and frameworks like jQuery to simplify the process, but still encountered difficulties.
I experimented with different methods for parsing the JSON data and injecting it into the table structure, but none produced the desired result.
What my expected result:
However, I’m struggling to achieve this. I have team data and want to generate a table like this using the provided data.
{
"name": "GSW",
"year": [
"2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030",
"2031", "2032", "2033", "2034", "2035"
],
"wins": [
10, 11, 12, 13, 13, 13, 13, 14, 15, 16, 17, 18, 19, 20, 21
],
},
{
"name": "LAL",
"year": [
"2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030",
"2031", "2032", "2033", "2034", "2035"
],
"wins": [
9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
],
},
{
"name": "PHX",
"year": ["2000", "2001"],
"wins": [1, 4]
}
]
Technically, I want to create a table with a maximum of 7 columns. When it reaches 7 columns, it should wrap, starting from the next row of the table. If the data for one team is not enough to fill the table, it should take data from the next team. The last row can be an empty row.