I need some help in terms of looping through the values of my table JSON value to generate a html table that will look like this:
<div>
<table>
<tr>
<td>Rows</td>
<td>List 1 </td>
<td>List 2 </td>
</tr>
<tr>
<td>Row 1</td>
<td>task 1, task 2</td>
<td>task 3</td>
</tr>
<tr>
<td>Row 2</td>
<td>task 4</td>
<td>task 5, task 6</td>
</tr>
</table>
</div>
So at a high level I need to loop through my rows, which there are 2 in the JSON below.
And for each row, I will have 2 additional columns in the table since there are 2 values in table.lists i.e. list1 and list2.
The values that are stored inside of the row cells is from the table.data portion of the JSON, as you can see I have the rowId's and then inside the taskId's for each listId.
import React, { useEffect, useState } from 'react';
import { useAppSelector, useAppDispatch } from '../../app/hooks';
import {
selectTable,
fetchTableAsync,
} from './tableSlice';
import {
DragDropContext,
Draggable,
Droppable,
DroppableProvided,
DraggableLocation,
DropResult,
DroppableStateSnapshot, DraggableProvided, DraggableStateSnapshot
} from 'react-beautiful-dnd';
export function Table() {
const table = useAppSelector(selectTable);
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(fetchTableAsync(""))
}, []);
console.log('select table value is: ');
console.log(JSON.stringify(table));
return (
<div>
<table>
<tr>
<td>Rows</td>
<td>List 1 </td>
<td>List 2 </td>
</tr>
<tr>
<td>Row 1</td>
<td>task 1, task 2</td>
<td>task 3</td>
</tr>
<tr>
<td>Row 2</td>
<td>task 4</td>
<td>task 5, task 6</td>
</tr>
</table>
</div>
);
}
The JSON value for table that my API will return looks like:
"table": {
"id": "aecf78db-e893-40e7-8a5a-e4150cc5129c",
"data": {
"row1": {
"list1": [
{
"task1": {
"sort": 1
}
},
{
"task2": {
"sort": 2
}
}
],
"list2": [
{
"task3": {
"sort": 1
}
}
]
},
"row2": {
"list1": [
{
"task4": {
"sort": 1
}
}
],
"list2": [
{
"task5": {
"sort": 1
}
},
{
"task6": {
"sort": 1
}
}
]
}
}
},
"lists": [
{
"list1": {
"name": "List 1",
"sort": 1
}
},
{
"list2": {
"name": "List 2",
"sort": 2
}
}
],
"rows":
{
"row1": {
"title": "Row 1"
},
"row2": {
"title": "Row 2"
}
}
,
"tasks":
{
"task1": {
"title": "task 1",
},
"task2": {
"title": "task 2",
},
"task3": {
"title": "task 3",
},
"task4": {
"title": "task 4",
},
"task5": {
"title": "task 5",
},
"task6": {
"title": "task 6",
},
}
};
Hoping someone can help with rendering the HTML using the supplied JSON.
I tried to make the JSON have the keys in arrays for quick lookups, hoping it will make lookups faster when rendering larger tables with lots of tasks etc.