Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Tracking Data Using Objects The Student Record Search Challenge Solution

Roudy Antenor
Roudy Antenor
4,124 Points

Weird little glitch driving me nutts! - (undefined)

The quit and list feature work great - but when i wish to show an individual report - it works BUT the first line is undefined and i do not know where this undefined is coming from - Any extra input would be much appreciated!

var students = [
  {
    name: 'James',
    track: 'Js Basics',
    achievement: '10',
    points: '100'
  },
  {
    name: 'John',
    track: 'CSS Basics',
    achievement: '25',
    points: '300'
  },
  {
    name: 'Rachel',
    track: 'HTML Basics',
    achievement: '30',
    points: '100'
  },
  {
    name: 'Richy',
    track: 'Java Basics',
    achievement: '50',
    points: '350'
  },
   {
    name: 'Jocky',
    track: 'MEAN Stack',
    achievement: '300',
    points: '1000'
  }
]

var studentRecords = '';
var custInquire;
var student;
var holdReport;
var flag =  true;



//CODE -  function to get an individual student's record using for-in loop:

function getStudentReport (students) {
  for (var property in students) {
    holdReport += '<p>' +property+ ': ' +students[property]+ '</p>'
  }
  return holdReport
}


//CODE -function  to print out to the document 

function print (message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = '<div>' +message+ '</div>'
}

// CODE -  check visitor input against set of parameters for an output.

while (flag) {
  custInquire  = prompt ('what student records would you like?, type quit to leave program or list for full list');
  if ( custInquire.toLowerCase() === 'quit' || custInquire === null){ 
    break;
  }else if  ( custInquire.toLowerCase() === 'list'){
   print (academyRecord());
    break;
  }else {
    for (var i = 0; i < students.length ; i++) {
    student = students[i].name;
    if (custInquire.toLowerCase() === student.toLowerCase() ){
     print (getStudentReport (students[i]));
     flag = false;
      }
    }
  }
}

//CODE -  function to list all of student records

function academyRecord (){
  studentRecords += '<h1>Below you will find our student records</h1>';
  for (var i = 0; i <students.length ; i++) {
    studentRecords += '<h2><strong> Below are the records for ' +students[i].name+ ':</strong></h2><hr>';
    for (var prop in students[i]){
      studentRecords += '<p>' +prop+ ': ' +students[i][prop]+ '</p>';
    }
  }
  return studentRecords;
}

2 Answers

andren
andren
28,558 Points

It comes from the fact that you use += on the holdReport variable without first assigning anything to it. If you assign an empty string to your holdReport like you do with the studentRecords variable. Like this:

var holdReport = '';

Then you will not get undefined in the beginning.

The reason this occurs in the first place is that when you use += to add a string to a variable, JavaScript will automatically convert the variable to a string if it is not already defined as such. When an undefined variable (a variable that has no value assigned to it) is converted it gets turned into a string actually containing the word undefined.

By assigning it an empty string you avoid this issue since JavaScript no longer needs to convert the variable before it adds the value.

Roudy Antenor
Roudy Antenor
4,124 Points

BIG THANK YOU! - and thank you for the break down of the solution as well :)