使用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

我想你正在寻找类似的东西？

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>

Answer 2

以下是将数据转换为行的方法。然后就可以轻松地逐行生成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);