title: Generate html table with dynamic rows and column using javascript
body: <p>I have these sets of data</p>
  <pre><code>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}
    ]
  }
  </code></pre>
  <p>How can I create a table using the data above? the result should be:</p>
  <pre><code>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       |
  </code></pre>
  <p>I have this initial javascript code, but I'm confused how to fill the data from students</p>
  <pre><code>&lt;div class=&quot;results&quot;&gt;&lt;/div&gt;
  &lt;script&gt;
  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 = '&lt;table class=&quot;table table-bordered&quot;&gt;';
    table += '&lt;thead&gt;';
      table += '&lt;tr style=&quot;background-color: #e5e5e5;&quot;&gt;';
        table += '&lt;th&gt;Question&lt;/th&gt;';
        table += '&lt;th&gt;Section&lt;/th&gt;';
        for(var idx in students) {
          table += '&lt;th class=&quot;text-center&quot;&gt;'+idx+'&lt;/th&gt;';
        }
      table += '&lt;/tr&gt;';
    table += '&lt;/thead&gt;';
    table += '&lt;tbody&gt;';
      Object.entries(questions).map(([key, question]) =&gt; {
        table += '&lt;tr class=&quot;text-center&quot;&gt;';
          table += '&lt;td&gt;'+question.question+'&lt;/td&gt;';
          table += '&lt;td&gt;'+question.section+'&lt;/td&gt;';
        table += '&lt;/tr&gt;';
      })
    table += '&lt;/tbody&gt;';
  table += '&lt;/table&gt;';
  $('.results').append(table)
  &lt;/script&gt;
  </code></pre>
  <p>Here's the fiddle: <a href="https://jsfiddle.net/pLeqd8no/" rel="nofollow noreferrer">https://jsfiddle.net/pLeqd8no/</a></p>