Javascript Objects & Object Notations

Question

Trying to find out why when I iterate through an Object Array(students) property: [name] and then display in html tag ('output') with....

var outPutDivv = document.getElementById('output')
    outPutDivv.innerHTML = reportStudent;

It only shows the last name (Sarah)

When I'm trying to display all of them....

Here I'll just post the code here so you can test it out for yourself.

var students = [

  {
    Name: "Tim",
    Track: "JS Full-Stack",
    Achievments: 600,
    Points: 9000
  }, {
    Name: "Thea",
    Track: "Front End Dev",
    Achievments: 599,
    Points: 8999
  }, {
    Name: "Bob",
    Track: "Janitor",
    Achievments: 0,
    Points: 0
  }, {
    Name: "Luke",
    Track: "iOS Dev",
    Achievments: 300,
    Points: 6000
  }, {
    Name: "Sarah",
    Track: "Android Dev",
    Achievments: 400,
    Points: 7000
  }

];

function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

function reportStudents(student) {
  var report = "<h2> Student: " + student.Name;
  report += "<p> Track: " + student.Track;
  report += "<p> Achievement: " + student.Achievments;
  report += "<p> Points: " + student.Points;
  return report;

}

function studentList() {
  for (var prop in students) {
    var stulist = students[prop].Name;
    var reportStudent = stulist;
    var outPutDivv = document.getElementById('output')
    outPutDivv.innerHTML = reportStudent;
  }
   return reportStudent;
}



while (true) {
  var record = prompt("Type the students name you're looking for.\nOtherwise Type \"Quit\" to exit the application.\n\nType \"Student\" to see the list of students.");
  if (record === "Quit" || record === null) {
    break;
  } else if (record === "Student") {
    studentList();

  }

  for (var i = 0; i < students.length; i++) {
    var student = students[i];
    if (record === student.Name) {
      messsage = reportStudents(student);
      print(message);
    }
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
  <!-- <link rel="stylesheet" href="css/styles.css"> -->
</head>
<body>
<h1>Students</h1>
<div id="output">

</div>
<!-- <script type="text/javascript" src="students.js"></script> -->
<script src="app.js"></script>
</body>
</html>

Hopefully someone can tell me what's wrong. I spent hours of research trying to find why it won't call all names and only the last one. I thought of possibly putting a for loop within my for...in loop to iterate through the names? - But it didn't work so well.

Thank you ahead of time for your efforts.

Answer 1 · 2015-07-23T09:00:25Z

July 23, 2015 9:00am

Demo - http://jsbin.com/peleho/edit?html,js,output#J:L63.

function reportStudents(student) {
  var report = "<h2> Student: " + student.Name;
  report += "<p> Track: " + student.Track;
  report += "<p> Achievement: " + student.Achievments;
  report += "<p> Points: " + student.Points;
  return report;

}

  function studentList() {
  for (var prop in students) {
    var stulist = students[prop];
    var reportStudent = stulist;
    alert(reportStudent);
    var outPutDivv = document.getElementById('output');


   // you are missing '+' sign [Concatenation]


    outPutDivv.innerHTML += reportStudents(reportStudent);
  }

}


/*
function studentList() {
  for (var prop in students) {
    var stulist = students[prop].Name;
    var reportStudent = stulist;
    var outPutDivv = document.getElementById('output')
    outPutDivv.innerHTML = reportStudent;
  }
   return reportStudent;
}
*/

//In the above function you are returning out of scope variable [i.e reportStudent], reportStudent is local variable which is only available inside the for loop.In case if you need to access it just remove 'var' keyword.

studentList();

Welcome to the Treehouse Community

Looking to learn something new?

Timothy Durward

Timothy Durward

Javascript Objects & Object Notations

1 Answer

Rakesh V

Rakesh V