title: JSON is returning [object Object] and then result instead of only the result
body: <p>So I will explain quickly. I am really new to JSON and Jquery/Javascript. I am building an internal website for a school and I want to build a specific page for each grade with the students listed on the page. Then all students has his personal page. The Json file looks like this:</p>
  <pre><code>[
    {
      &quot;id&quot;: &quot;sixthgrade&quot;,
      &quot;grade&quot;: &quot;Sixth grade&quot;,
      &quot;URL&quot;: &quot;/grades/sixthgrade.html&quot;,
      &quot;listStudents&quot;: [
        {
          &quot;studentName&quot;: &quot;John Doe&quot;,
          &quot;stuudentId&quot;: &quot;johndoe&quot;,
          &quot;studentPage&quot;: &quot;/students/johndoe.html&quot;,
          &quot;studentImageUrl&quot;: &quot;/images/students/johndoe.jpg&quot;
        }
      ]
    },
    {
      &quot;id&quot;: &quot;sixthgrade&quot;,
      &quot;grade&quot;: &quot;Sixth grade&quot;,
      &quot;URL&quot;: &quot;/grades/sixthgrade.html&quot;,
      &quot;listStudents&quot;: [
        {
          &quot;StudentName&quot;: &quot;Paul Jackson&quot;,
          &quot;studentId&quot;: &quot;pauljackson&quot;,
          &quot;studentPage&quot;: &quot;/students/pauljackson.html&quot;,
          &quot;studentImageUrl&quot;: &quot;/images/students/pauljackson.jpg&quot;
        },
        {
          &quot;StudentName&quot;: &quot;Alisson Smith&quot;,
          &quot;studentId&quot;: &quot;sixthgrade&quot;,
          &quot;studentPage&quot;: &quot;/students/alissonsmith.html&quot;,
          &quot;studentImageUrl&quot;: &quot;/images/students/alissonsmith.jpg&quot;
        }
      ]
    }
  ]
  </code></pre>
  <p>And the JavaScript is that:</p>
  <pre><code>$.getJSON(&quot;/scripts/school.json&quot;, function(data) {
    var table = [];
    var studentId = '';
    var studentName = '';
    var studentImageUrl = '';
    var studentPage = '';
    var gradeId = '';
    $.each(data, function(key, val) {
      table = val['listStudents'];
      gradeId = val['id'];
  
      $.each(table, function(id, value) {
        studentId = value['studentId'];
        studentName = value['studentName'];
        studentImageUrl = value['studentImageUrl'];
        studentPage = value['studentPage'];
        table.push(&quot;&lt;li class='container-image &quot; + studentId + &quot;'&gt;&lt;a href='&quot; + studentPage + &quot;'&gt;&lt;img src='&quot; + studentImageUrl + &quot;' /&gt;&lt;span class='text'&gt;&quot; + studentName + &quot;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&quot;);
        console.log(table);
      });
  
      $(&quot;&lt;ul/&gt;&quot;, {
        &quot;class&quot;: &quot;students-list &quot; + gradeId + &quot;&quot;,
        html: table.join('')
      }).appendTo(&quot;#list-students&quot;);
    });
  });
  </code></pre>
  <p>I get this result for the 1st row UL [object Object] then the result of the Li that is what I only want to have.
  For the 2nd row, I have UL [object Object][object Object] then the 2 LI with the only results I want to have.
  For each row I have [object Object] depending of the number of students and then the LI with the information I want to have.</p>
  <p>I tried to put JSON.stringify() everywhere I could and still getting [object Object].</p>
  <p>Help would be so helpful. Thanks in advance.</p>