Only with the last student works perfect.

Question

First when I type one of the three first doesn't print the name info but some how it save it and whenever you type the last student it print out right only one of the three first student and the rest out the table.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
  <style>
/*General*/
body {
  background: #fff;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  font: Helvetica Neue, Helvectica, Arial, serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.5em;
  color: #8d9aa5;
}
#color div {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
}

span {
  color: red;
}
#output{
    display: inline-block;
    position: relative;
    background: #eaeaea;
    border-radius: 10px;
    font-size: 30px;
}
table{
    background: white;
}
td{
    padding: 10px;
    text-align: center;
    color: #289ddb;
    border: 3px solid #eaeaea;
}
.red{
    color: red;
}

</style>
<script>
    var search;
var html = "<table>"+"<tr>"+"<td>"+"Name"+"</td>"+"<td>"+"Last Name"+"</td>"+"<td>"+"Student"+"</td>"+"<td>"+"Nacionality"+"</td>"+"<td>"+"Age"+"</td>"+"<td>"+"Have A Car"+"</td>"+"</tr>";
var student;
var students = [
    {
        name: "Pedro",
        lastName: "Perez",
        student: true,
        nacionality: "Dominican Republic",
        age: 26,
        haveACar: false
    },
    {
        name: "Alex",
        lastName: "Perez",
        student: true,
        nacionality: "Dominican Republic",
        age: 25,
        haveACar: true
    },
    {
        name: "Luis",
        lastName: "Perez",
        student: false,
        nacionality: "Dominican Republic",
        age: 24,
        haveACar: true
    },
    {
        name: "Sam",
        lastName: "Perez",
        student: true,
        nacionality: "Dominican Republic",
        age: 22,
        haveACar: false
    }
];
function print(content){
    var output = document.getElementById("output");
    output.innerHTML = content;
    output.style.padding = "3Spx";
}
function getStudentReport(student){
     var report = "<tr>"+
            '<td class="red">'+student.name+"</td>"+
            '<td class="red">'+student.lastName+"</td>"+
            '<td class="red">'+student.student+"</td>"+
            '<td class="red">'+student.nacionality+"</td>"+
            '<td class="red">'+student.age+"</td>"+
            '<td class="red">'+student.haveACar+"</td>"+"</tr>";
    return report;
}

while(true) {
    search = prompt("Type a name to search!", "Type here! You can type \"cancel\" to end the search");

    if(search === null || search.toLowerCase() === "cancel"){
        break;
    }

for(var prop in students){
    student = students[prop];
    if(search === student.name){
        html += getStudentReport(student) + "</table>";
        print(html);
    }else{
        print("'"+search+"' was no found.");
    }
 }
}


</script>
</head>
<body>
<h1>Students</h1>
<div id="output">

</div>
<script src="js/students.js"></script>
</body>
</html>

Answer 1 · 2016-03-29T01:54:23Z

March 29, 2016 1:54am

Okay, so there's a few things you need to fix up here.

First, you're including an inline script in the head of your HTML, then calling an external script in the body. You probably want to do the latter, with all the JavaScript code in an external file that you're referencing. Alternatively, you can just move the script tag from the top to the bottom, replacing the js/students.js reference.

Second, you're using the for .. in loop on an array, when it is designed to be used for looping over the properties of an object. You should instead use a regular for loop... which leads to:

Third, the reason you're only getting it working on the last cycle of the loop is because you're changing the value of the student variable in each cycle/iteration of the loop, and therefore it only matches if you're also searching for the last item of the loop. You should instead set the value of the student variable if it matches the name of the current object in the array, and only call the print function outside of the for loop (still inside the while loop):

  while(true) {
    student = null;
    search = prompt("Type a name to search!", "Type here! You can type \"cancel\" to end the search");

    if(search === null || search.toLowerCase() === "cancel"){
      break;
    }

    for(var i = 0; i < students.length; i++){
      if(search === students[i].name){
        student = students[i];
      }
    }

    if (student) {
      html += getStudentReport(student);
      print(html);
    } else{
      print("'"+search+"' was not found.");
    }
  }

  html += "</table>";
  print(html);

Note that I moved the closing table tag to outside the while loop. This is so that subsequent searches don't close the table before the user is finished searching.

Also note that if the user isn't found, it will 'print' the not found message, but your HTML is still saved in a variable, so the user can continue searching where they left off and it will reprint the entire table.

Welcome to the Treehouse Community

Looking to learn something new?

Samuel Quiroz

Samuel Quiroz

Only with the last student works perfect.

1 Answer

Iain Simmons

Iain Simmons