Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Javascript Objects & Object Notations

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.

1 Answer

Rakesh V
Rakesh V
2,690 Points

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