使用javascript生成带有动态行和列的html表

Question

我有这些数据集

var questions = [
{ id: 1, 'question': 1, 'section': 1 },
{ id: 2, 'question': 1, 'section': 2 },
{ id: 3, 'question': 2, 'section': 1 },
{ id: 4, 'question': 2, 'section': 2 }
]
var students = {
'student_1': [
{id: 1, answer: 1, question_id: 1},
{id: 1, answer: 1, question_id: 2},
{id: 1, answer: 2, question_id: 3},
{id: 1, answer: 1, question_id: 4}
],
'student_2': [
{id: 1, answer: 2, question_id: 1},
{id: 1, answer: 1, question_id: 2},
{id: 1, answer: 2, question_id: 3},
{id: 1, answer: 1, question_id: 4}
],
'student_3': [
{id: 1, answer: 1, question_id: 1},
{id: 1, answer: 1, question_id: 2},
{id: 1, answer: 1, question_id: 3},
{id: 1, answer: 1, question_id: 4}
]
}

如何使用上面的数据创建表?结果应该是:

Question   |   Section   |   student_1   |   student_2   |   student_3   |
__________________________________________________________________________
1      |      1      |       1       |       2       |       1       |
__________________________________________________________________________
1      |      2      |       1       |       1       |       1       |
__________________________________________________________________________
2      |      1      |       2       |       2       |       1       |
__________________________________________________________________________
2      |      2      |       1       |       1       |       1       |

我有这个初始的javascript代码，但我很困惑如何填写学生的数据

<div class="results"></div>
<script>
var questions = [
{ id: 1, 'question': 1, 'section': 1 },
{ id: 2, 'question': 1, 'section': 2 },
{ id: 3, 'question': 2, 'section': 1 },
{ id: 4, 'question': 2, 'section': 2 }
]
var students = {
'student_1': [
{id: 1, answer: 1, question_id: 1},
{id: 1, answer: 1, question_id: 2},
{id: 1, answer: 2, question_id: 3},
{id: 1, answer: 1, question_id: 4}
],
'student_2': [
{id: 1, answer: 2, question_id: 1},
{id: 1, answer: 1, question_id: 2},
{id: 1, answer: 2, question_id: 3},
{id: 1, answer: 1, question_id: 4}
],
'student_3': [
{id: 1, answer: 1, question_id: 1},
{id: 1, answer: 1, question_id: 2},
{id: 1, answer: 1, question_id: 3},
{id: 1, answer: 1, question_id: 4}
]
}
var table = '<table class="table table-bordered">';
table += '<thead>';
table += '<tr style="background-color: #e5e5e5;">';
table += '<th>Question</th>';
table += '<th>Section</th>';
for(var idx in students) {
table += '<th class="text-center">'+idx+'</th>';
}
table += '</tr>';
table += '</thead>';
table += '<tbody>';
Object.entries(questions).map(([key, question]) => {
table += '<tr class="text-center">';
table += '<td>'+question.question+'</td>';
table += '<td>'+question.section+'</td>';
table += '</tr>';
})
table += '</tbody>';
table += '</table>';
$('.results').append(table)
</script>

小提琴在这里:https://jsfiddle.net/pLeqd8no/

Answer 1

如何将数据转换为行。然后，您可以轻松地逐行生成HTML表。

const questions = [
{ id: 1, 'question': 1, 'section': 1 },
{ id: 2, 'question': 1, 'section': 2 },
{ id: 3, 'question': 2, 'section': 1 },
{ id: 4, 'question': 2, 'section': 2 }
]
const students = {
'student_1': [
{id: 1, answer: 1, question_id: 1},
{id: 1, answer: 1, question_id: 2},
{id: 1, answer: 2, question_id: 3},
{id: 1, answer: 1, question_id: 4}
],
'student_2': [
{id: 1, answer: 2, question_id: 1},
{id: 1, answer: 1, question_id: 2},
{id: 1, answer: 2, question_id: 3},
{id: 1, answer: 1, question_id: 4}
],
'student_3': [
{id: 1, answer: 1, question_id: 1},
{id: 1, answer: 1, question_id: 2},
{id: 1, answer: 1, question_id: 3},
{id: 1, answer: 1, question_id: 4}
]
}
const studentEntries = Object.entries(students);
const header = ["Question","Section",...studentEntries.map(s => s[0])];
const rows = questions.map(question => [question.question,question.section,...studentEntries.map(s => s[1].find(a => a.question_id == question.id).answer)]);
console.log(header);
console.log(rows);

Answer 2

我想你正在寻找这样的东西?

const questions = [ { id: 1, question: 1, section: 1 } , { id: 2, question: 1, section: 2 } , { id: 3, question: 2, section: 1 } , { id: 4, question: 2, section: 2 } ] 
const students = 
{ student_1: [ { id: 1, answer: 1, question_id: 1 } , { id: 1, answer: 1, question_id: 2 } , { id: 1, answer: 2, question_id: 3 } , { id: 1, answer: 1, question_id: 4 } ] 
, student_2: [ { id: 1, answer: 2, question_id: 1 } , { id: 1, answer: 1, question_id: 2 } , { id: 1, answer: 2, question_id: 3 } , { id: 1, answer: 1, question_id: 4 } ] 
, student_3: [ { id: 1, answer: 1, question_id: 1 } , { id: 1, answer: 1, question_id: 2 } , { id: 1, answer: 1, question_id: 3 } , { id: 1, answer: 1, question_id: 4 } ]
} 
const
Res   = document.querySelector('div.results')
, tbl   = Res.appendChild( document.createElement('table') ) 
, tBody = tbl.createTBody()
;
tbl.createTHead()
questions.forEach(({id, question, section},i) =>
{
if (i===0) 
{
let row = tbl.tHead.insertRow()
row.insertCell().textContent =  'Question'
row.insertCell().textContent =  'Section'
}
let row = tBody.insertRow()
row.question_id              =  id
row.insertCell().textContent =  question
row.insertCell().textContent =  section
})
Object.entries(students).forEach(([student,answers])=>
{
tbl.tHead.rows[0].insertCell().textContent = student;
answers.forEach(({answer,question_id}) =>
{
[...tBody.rows].find(r=>r.question_id===question_id)
.insertCell().textContent = answer
})
})

table  {
border-collapse : collapse;
margin          : 2em 1em;
}
thead { 
background-color : lightsteelblue;
font-weight      : bold;
}
td {
padding    : .2em .8em;
border     : 1px solid darkblue;
text-align : center;
}

<div class="results"></div>