Generate html table with dynamic rows and column using javascript

Question

I have these sets of data

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}
  ]
}

How can I create a table using the data above? the result should be:

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       |

I have this initial javascript code, but I'm confused how to fill the data from students

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

Here's the fiddle: https://jsfiddle.net/pLeqd8no/

Ricky Mo · Accepted Answer · 2021-10-18 03:31:19Z

Here is how you can convert the data into rows. Then you can generate HTML table row by row easily.

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);

@JSN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Mister Jojo · Accepted Answer · 2021-10-18 04:54:09Z

I suppose you are looking for something like that ?

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>

Collectives™ on Stack Overflow

Generate html table with dynamic rows and column using javascript

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related