英文:
Array data in 3 different column
问题
我有一个数组：
[
{name: 'task1', status: 'new'},
{name: 'task2', status: 'progress'},
{name: 'task3', status: 'completed'},
{name: 'task4', status: 'progress'},
{name: 'task5', status: 'new'}
]
我需要在3列中显示数组的列表。
| 新任务 | 进行中任务 | 完成的任务 |
|---|---|---|
| task1 | task2 | task3 |
| task5 | task4 |
对于这个问题，你可以创建3个不同的数组，然后进行迭代。是否有更好的方法，要看你的具体需求和代码框架而定。
英文:
I have an array:
[
{name: 'task1', status: 'new'},
{name: 'task2', status: 'progress'},
{name: 'task3', status: 'completed'},
{name: 'task4', status: 'progress'},
{name: 'task5', status: 'new'}
]
I need to show the list of the array in 3 columns.
| New task | progressTask | completed task |
|---|---|---|
| task1 | task2 | task3 |
| task5 | task5 |
what will be the best process for this.
I can create 3 different array and then iterate it. is there any better way than this.
答案1
得分: 1
我已经创建了一个小的JavaScript代码片段，演示了如何实现这个逻辑。这只是一个示例，你需要根据React的要求进行修改。
const tasks = [{
name: 'task1',
status: 'new'
},
{
name: 'task2',
status: 'progress'
},
{
name: 'task3',
status: 'completed'
},
{
name: 'task4',
status: 'progress'
},
{
name: 'task5',
status: 'new'
}
];
const newTasks = [];
const inProgressTasks = [];
const completedTasks = [];
for (let task of tasks) {
switch (task.status) {
case "new":
newTasks.push(task);
break;
case "progress":
inProgressTasks.push(task);
break;
case "completed":
completedTasks.push(task);
break;
}
}
const numTableRows = Math.max(newTasks.length, inProgressTasks.length, completedTasks.length);
const rows = [];
for (let n = 0; n < numTableRows; n++) {
cellNewTask = newTasks[n]?.name ?? '-';
cellInProgressTask = inProgressTasks[n]?.name ?? '-';
cellCompletedTask = completedTasks[n]?.name ?? '-';
rows.push([cellNewTask, cellInProgressTask, cellCompletedTask]);
}
console.log(rows);
你现在只需在React中循环遍历这些行并渲染表格即可。
英文:
I've created a small snippet in JS on how you could do it. This is just an example of how the logic could look like. Of course, you have to modify it to make it work for React.
But you get the idea:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const tasks = [{
name: 'task1',
status: 'new'
},
{
name: 'task2',
status: 'progress'
},
{
name: 'task3',
status: 'completed'
},
{
name: 'task4',
status: 'progress'
},
{
name: 'task5',
status: 'new'
}
];
const newTasks = [];
const inProgressTasks = [];
const completedTasks = [];
for (let task of tasks)  {
switch (task.status) {
case "new":
newTasks.push(task);
break;
case "progress":
inProgressTasks.push(task);
break;
case "completed":
completedTasks.push(task);
break;
}
}
const numTableRows = Math.max(newTasks.length, inProgressTasks.length, completedTasks.length);
const rows = [];
for (let n = 0; n < numTableRows; n++) {
cellNewTask = newTasks[n]?.name ?? '-';
cellInProgressTask = inProgressTasks[n]?.name ?? '-';
cellCompletedTask = completedTasks[n]?.name ?? '-';
rows.push([cellNewTask, cellInProgressTask, cellCompletedTask]);
}
console.log(rows);
// Now you just need to loop over the rows with React and render the Table
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论