Having trouble with the optional challenge at the end of the video. Please help!

Question

The challenge is to be able to print all records with the same value for the "name" property from the student array of objects onto the page. The second part of the challenge to give the user an alert if their input does not match with a student name in the object array.

My issue is that I am having trouble displaying results for records that do match in the array. No matter what name I type, I always get my alert box, when instead it should be displaying all the results for, say, "Jody." Any advice would be helpful!

var students = [ 
  { 
   name: 'Jody',
    track: 'Front End Development',
    achievements: 158,
    points: 14730
  },
  {
    name: 'Jody',
    track: 'iOS Development with Swift',
    achievements: '175',
    points: '16375'
  },
  {
    name: 'Jordan',
    track: 'PHP Development',
    achievements: '55',
    points: '2025'
  },
  {
    name: 'John',
    track: 'Learn WordPress',
    achievements: '40',
    points: '1950'
  },
  {
    name: 'Trish',
    track: 'Rails Development',
    achievements: '5',
    points: '350'
  }
];
var message = '';
var student;
var answer;

//print record in the #output div
function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

function getStudentReport(student) {
  var report = '';
  report += '<h2>Student: ' + students[prop].name + '</h2>';
  report += '<p>Track: ' + students[prop].track + '</p>';
  report += '<p>Points: ' + students[prop].points + '</p>';
  report += '<p>Achievements: ' + students[prop].achievements + '</p>';
  return report;
}


//loop through selecting student record and hydrating the template
while (true) {
  answer = prompt("Search student records: type a name and press 'OK',   or type 'quit' to end.");

  if (answer === null || answer.toLowerCase() === 'quit') {
    break;
  }
  for (var prop in students) { 
    student = students[prop];
    if (student.name.toLowerCase() === answer.toLowerCase()) {
      message = getStudentReport(student);
      print(message);
    }    
    else {
      //Add alert box
      alert (answer + " is not in our records");
      break;
      }
    }
  }

Answer 1 · 2017-03-17T22:42:24Z

March 17, 2017 10:42pm

I think you are on your way already. I think you will be able to figure it out, but if not, perhaps consider this:

Instead of the for-in loop, maybe you could use the javascript array-method called .filter(). It returns an array with all the matching elements.

  var foundStudents = students.filter(function(stud){
    return stud.name.toLowerCase() === answer.toLowerCase();
  })

  if (foundStudents.length > 0) {
    foundStudents.forEach(function(stud){
      alert(getStudentReport(stud))
    })
  } else {
    alert('Could not be found');
  }

The getStudentReport could then also be changed:

function getStudentReport(stud) {
  var report = '';
  report += '<h2>Student: ' + stud.name + '</h2>';
  report += '<p>Track: ' + stud.track + '</p>';
  report += '<p>Points: ' + stud.points + '</p>';
  report += '<p>Achievements: ' + stud.achievements + '</p>';
  return report;
}

Answer 2 · 2017-03-24T13:51:55Z

March 24, 2017 1:51pm

If you try to do it with methods, that contain only in this course, check my solution.

var message = '';
var student;
var search;
var outOfReport = 0;

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

while (true) {
  search = prompt('Type the name of student or type "quit" to close search');
  if ( search === null || search.toLowerCase() === 'quit' ) {
    break;
  } 
  for (var i = 0; i < students.length; i += 1) {
    student = students[i].name;
    if ( search === student ) {
      message += '<h2>Name: ' + students[i].name + '</h2>';
      message += '<p>Track: ' + students[i].track + '</p>';
      message += '<p>Achivements: ' + students[i].achievements + '</p>';
      message += '<p>Points: ' + students[i].points + '</p>';
    } 
// if no matches, we give +1 to our counter
// if counter = the number of objects in the array, it means no matches at all
    else {
      outOfReport += 1;
    }
  }
  // alert appears, if no matches found, and give 0 to counter for another loop
  if ( outOfReport === students.length ) {
    alert(search + ' is not our student!');
    outOfReport = 0;
  }
}

print(message);

Answer 3 · 2017-04-24T12:01:19Z

April 24, 2017 12:01pm

Filter is an array-method that loops over every item in an array and returns a new array. The new array contains only items that meet the condition that we test. We test this by returning a conditional for every item in the array.

[ 1, 2, 3, 4, 5, 6, 7].filter(number => number > 1) .

Here I tell the filter-method to filter all numbers that are bigger than 1.

// returns [2, 3, 4, 5, 6, 7]

Other example:

const people = [
 { name: 'Hank', age: 10 },
 { name: 'Marie', age: 44 },
 { name: 'Marie', age: 29 },
 { name: 'Jack', age: 30 }
];

const peopleNamedMarie = people.filter(person => person.name === 'Marie')
// returns [{ name: 'Marie', age: 44 }, { name: 'Marie', age: 29 }];

const adults = people.filter(person => person.age >= 18)
// returns an array of people with an age of 18 and over

I am using ES6 arrow-functions in my example with an implicit return. You can also write:

array.filter(item => {
  return item === someComparison // Note that we must return 
})

array.filter(function(item) { 
  return item === someComparison // Note that we must return 
})

So in short: you can call .filter on any array, and then test each item in the loop to see if it meets a condition. If it does, then it is added into the new array. If not, then it is skipped. It is always a good idea to experiment with things like this. There are good sites for this, one that you can use is https://babeljs.io/repl/ jsbin, etc.

Answer 4 · 2017-04-24T18:53:03Z

April 24, 2017 6:53pm

Hello Dmitri,

When you use .filter and you pass in a named function, you do not have to call the function inside the parentheses.

You could just do:

var array = [1, 2, 3]
function someFunction(arg) {
 console.log(arg)
}
array .filter(someFunction)   
// notice that you do not have to do something like array.filter(someFunction((someArg))
// just array.filter(someFunction) will do.

Regarding the last part. You should be able to do this:

filteredStudents.forEach(getStudentReport)

Remember that filter returns an array and forEach does not. The forEach method only iterates over all the items in an array and executes whatever you tell it to once for every item, but it does not return an array. That means that the result of this:

var someResult = filteredStudents.forEach(result);

Will be undefined.

Because you are using a forEach, it might very well be that it looks like it only prints one item, but it might actually print one item at a time for each match (in this case 2 times.).

I am not able to debug at this moment to see what the problem is exactly. However, if you wish to loop/iterate over an array and also return an array, you should try .map instead.

[1, 2, 3, 4, 5].map(number => number)

// returns [1, 2, 3, 4, 5]

only works if you have es6 available

Answer 5 · 2017-04-24T20:56:08Z

April 24, 2017 8:56pm

The reason that it don't work is probably because at every iteration (every student it loops over), it exits/pauses the loop to print that student. As every iteration is just 1 student, it can at anytime only print the student that is being iterated over at that very moment. Whereas document.write doesn't exit, but adds each piece of html until its finished. The result being the sum of all html you wrote.

So in short:

document.write -> sums up all blocks of html (1 + 1 + 1 = 3)
print -> print one block of html at a time (1) (1) (1)

If you want to print both objects,

var match = "David"; var students = [
{ name: "David", age: 23, course: "Java", level: "Noobie" },
{ name: "David", age: 24, course: "CS", level: "Professional" },
{ name: "Brigita", age: 28, course: "PHP", level: "intermediate" },
{ name: "John", age: 23, course: "HTML", level: "Rookie" }
];

function getStudentReport(stud) { var report = '<h2>Student: ' + stud.name + '</h2>'; report += '<p>Track: ' + stud.age + '</p>'; report += '<p>Points: ' + stud.course + '</p>'; report += '<p>Achievements: ' + stud.level + '</p>'; document.write(report); }

function studentsFilter (stud) { if (stud.name.toLowerCase() === match.toLowerCase()) { return stud; } }
var filteredStudents = students.filter(studentsFilter);

print(filteredStudents.forEach(getStudentReport))

The reason this should work is that we call the print-method only once, rather than on every iteration. As print itself is already a built-in function, you do not need a printStudent-function.

Answer 6 · 2017-04-25T05:34:51Z

April 25, 2017 5:34am

Could you paste the code that produced this out put (whole code)?

I pasted the code I provided into https://babeljs.io/ and it prints:

Student: David Track: 23 Points: Java Achievements: Noobie Student: David Track: 24 Points: CS Achievements: Professional

Student: David Track: 24 Points: CS Achievements: Professional

Answer 7 · 2017-04-25T20:41:46Z

April 25, 2017 8:41pm

If the output is fine there then I am afraid I cannot help you further (as there could be an x number of reasons for this to happen, and we could at most guess why). I would take the result you get @ babeljs.io as the correct output, and continue your coding quest :)

Welcome to the Treehouse Community

Looking to learn something new?

Tassia Paschoal

Tassia Paschoal

Having trouble with the optional challenge at the end of the video. Please help!

nico dev

nico dev

7 Answers

Rogier Nitschelm

Rogier Nitschelm

Dmitri Antonov

Dmitri Antonov

nico dev

nico dev

Dmitri Antonov

Dmitri Antonov

nico dev

nico dev

Yugo Breivo

Yugo Breivo

Rogier Nitschelm

Rogier Nitschelm

Dmitri Antonov

Dmitri Antonov

Rogier Nitschelm

Rogier Nitschelm

Dmitri Antonov

Dmitri Antonov

Rogier Nitschelm

Rogier Nitschelm

Dmitri Antonov

Dmitri Antonov

Rogier Nitschelm

Rogier Nitschelm

Dmitri Antonov

Dmitri Antonov

Rogier Nitschelm

Rogier Nitschelm