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.

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>

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.