Untitled

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Joe</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
  <div id="output">
  </div>
  <script>
    var students = [{
        name: 'Joe',
        track: 'Full Stack JavaScript',
        achivements: 10,
        points: 1000
      },
      {
        name: 'Sally',
        track: 'IOS',
        achivements: 10,
        points: 1000
      }
    ]


    function renderObj(obj) {
      var render = document.createElement("div");
      render.setAttribute("id", "student_list");
      console.log(render)

      obj.forEach(student => {
        var h2 = document.createElement("h2");
        var content = document.createTextNode(`Student: ${student.name}`);
        h2.appendChild(content);
        render.appendChild(h2);
      });

      return render;
    }

    function display(obj, html_node) {
      html_node.appendChild(renderObj(obj));
    }

    var output = document.getElementById('output');
    display(students, output);
  </script>
</body>

</html>