Iterate through an array of Objects

Question

I need to loop through an array of objects, and prompt the user to enter a student's name. if the name exists I need to print the student's data to the screen or else keep on iterating until the user types quit.

The issue I have is, if I type the name of student of the last object, the student's records will not print until the loop completes.

Please see the code below:

var students = [{
 name: 'hacene',
 track: 'Full Stack JavaScript',
 achievements: 12,
 points: 1226
 },
 {
 name: 'dave',
 track: 'PHP Development',
 achievements: 128,
 points: 14868
 },
 {
 name: 'layla',
 track: 'iOS Development',
 achievements: 8,
 points: 901
 },
 {
 name: 'mika',
 track: 'Front-End Development',
 achievements: 15,
 points: 1666
 },
 {
 name: 'heisenberg',
 track: 'Blue Meth Manufacturing',
 achievements: 99,
 points: 9999
 }
];
var student;
var records = '';
var search;
// Print function to print the content
function print(message) {
 var outputDiv = document.getElementById('output');
 outputDiv.innerHTML = message;
}
// Access each students records in the array / a loop is needed to achieve this
for (var i = 0; i < students.length; i++) {
 student = students[i];
 console.log(student);
 search = prompt('Please enter a student\'s name to see his records: ');
 search = search.toLocaleLowerCase();
 console.log(search);
 if (search === student.name) {
 records += '<h2><strong>Student: ' + student.name + '</strong><h2>';
 records += '<p>Track: ' + student.track + '</p>';
 records += '<p>Points: ' + student.points + '</p>';
 records += '<p>Achievements: ' + student.achievements + '</p>';
 break;
 } else if (search === 'quit') {
 break;
 }
}
// Print the students' name; track, achievments and points
print(records);

What I need is, to be able to print the records of a student, from the first prompt even if he's the last on the list.

• Nico: Can you explain about the reason of doing it on the for loop ? It should be better to do it with an input. It's quite easy of doing it by this way. Comment if it interests you then i will help you.
• Hacene .N: It's a course challenge and the requirements are like this :)
• Euler Ribeiro Sudbrack: You can move out that prompt from the loop and instead of the for you can use Array.find() method. ex: record = students.find((student) => { return student.name === prompt.toLowerCase() })
• Nico: You have to explain all the requirements because there is so many way of doing it. We have to know what we need to know what you are allowed to do and what you are not allowed.
• Hacene .N: I am required to use only the propmpt method, and the different type of loops available, meaning for, while, do-while and for-in loops. And I need to prompt the user to enter a name, search through the array and print to the screen the student's records.

Answer 1

What you have done it's more like a guessing game : "find the name of the current student in the for loop" I don't know if you still need an answer but here you go :

You only have to put the prompt before the for loop. After the prompt you do the loop and stop if you find a result.

var students = [{
 name: 'hacene',
 track: 'Full Stack JavaScript',
 achievements: 12,
 points: 1226
 },
 {
 name: 'dave',
 track: 'PHP Development',
 achievements: 128,
 points: 14868
 },
 {
 name: 'layla',
 track: 'iOS Development',
 achievements: 8,
 points: 901
 },
 {
 name: 'mika',
 track: 'Front-End Development',
 achievements: 15,
 points: 1666
 },
 {
 name: 'heisenberg',
 track: 'Blue Meth Manufacturing',
 achievements: 99,
 points: 9999
 }
];
var student;
var records = '';
var search;
// Print function to print the content
function print(message) {
 var outputDiv = document.getElementById('output');
 outputDiv.innerHTML = message;
}
 search = prompt('Please enter a student\'s name to see his records: ');
// Access each students records in the array / a loop is needed to achieve this
for (var i = 0; i < students.length; i++) {
 student = students[i];
 search = search.toLocaleLowerCase();
 if (search === student.name) {
 records += '<h2><strong>Student: ' + student.name + '</strong><h2>';
 records += '<p>Track: ' + student.track + '</p>';
 records += '<p>Points: ' + student.points + '</p>';
 records += '<p>Achievements: ' + student.achievements + '</p>';
 break;
 }
}
// Print the students' name; track, achievments and points
print(records);

<div id="output"></div>

You can add a if statement on your loop.

if( search != "quit") {
for (var i = 0; i < students.length; i++) {
 student = students[i];
 search = search.toLocaleLowerCase();
 if (search === student.name) {
 records += '<h2><strong>Student: ' + student.name + '</strong><h2>';
 records += '<p>Track: ' + student.track + '</p>';
 records += '<p>Points: ' + student.points + '</p>';
 records += '<p>Achievements: ' + student.achievements + '</p>';
 break;
 }
}
}

With it, if you type quit you will not enter in the loop.

Even if it not fill your requirement the better way of doing it is using find method.

var students = [{
 name: 'hacene',
 track: 'Full Stack JavaScript',
 achievements: 12,
 points: 1226
 },
 {
 name: 'dave',
 track: 'PHP Development',
 achievements: 128,
 points: 14868
 },
 {
 name: 'layla',
 track: 'iOS Development',
 achievements: 8,
 points: 901
 },
 {
 name: 'mika',
 track: 'Front-End Development',
 achievements: 15,
 points: 1666
 },
 {
 name: 'heisenberg',
 track: 'Blue Meth Manufacturing',
 achievements: 99,
 points: 9999
 }
];
var student;
var records = '';
var search;
// Print function to print the content
function print(message) {
 var outputDiv = document.getElementById('output');
 outputDiv.innerHTML = message;
}
function write(student) {
 records += '<h2><strong>Student: ' + student.name + '</strong><h2>';
 records += '<p>Track: ' + student.track + '</p>';
 records += '<p>Points: ' + student.points + '</p>';
 records += '<p>Achievements: ' + student.achievements + '</p>';
 print(records);
}
search = prompt('Please enter a student\'s name to see his records: ');
student = students.find((element) => {
 if (element.name == search) {
 return true;
 }
})
if (student) {
 write(student);
 
};
// Print the students' name; track, achievments and points

<div id="output"></div>

• Hacene .N: Yeah I figured out that taking the prompt method out of the loop will make things work. I took note of the find method

Answer 2

Instead of looping over students to prompt the user, you need to continue prompting the user until they enter quit or you have a match.

Something like this:

var quit = false
while(!quit) {
 search = prompt('Please enter a student\'s name to see his records: ');
 search = search.toLocaleLowerCase();
 if (search === 'quit') {
 quit = true;
 continue;
 }
 // search for student here and if match is found then set quit to true
}

Answer 3

I need to loop through an array of objects, and prompt the user to enter a student's name. if the name exists I need to print the student's data to the screen or else keep on iterating until the user types quit.

You need to rethink your algorithm:

get input from user
while user does not enter "quit"
 for each object in list
 if name is the same as input
 output the record
 get input from user

Note that you need to get the input from the user then iterate over the list to search for the correct object.

Alternatively, you could use an object instead of a list. This outer object would have the student's name as a key and the object record as a value. Now you can index on the student's name that the user inputs to get the record directly rather than searching through a list.