I'm having trouble understanding the condition in the else if statement under the for loop in my code. I'd really appreciate it if you could help.
This is an array of objects containing student information, name, study track, achievements, points. I just need help understanding this condition: i === (students.length) -1
var students = [
{ name: 'Dave', 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: 'Jody', track: 'Learn WordPress', achievements: 40, points: 1950 },
{ name: 'Trish', track: 'Rails Development', achievements: 5, points: 350 }
];
var htmlMessage = '';
var student;
var search;
var notFound = [];
function print(message) {
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = message;
}
function getStudentReport( student ) {
var report = '<h2>Student: ' + student.name + '</h2>';
report += '<p>Track: ' + student.track + '</p>';
report += '<p>Points: ' + student.points + '</p>';
report += '<p>Achievements: ' + student.achievements + '</p>';
return report;
}
while (true) {
search = prompt('Search student records:\ntype a name Ex: Jody\n(or type "quit" to end)');
if (search === '') {
alert('Please enter a name to initiate search.')
} else if (search === null || search.toLowerCase() === 'quit') {
print('<h2>Thanks for using our student record search services.</h2><p>These names were not found : ' +
notFound.join(', ') + '</p>');
break;
}
for (var i = 0; i < students.length; i++) {
student = students[i];
if (student.name.toLowerCase() === search.toLowerCase()) {
htmlMessage = getStudentReport(student);
print(htmlMessage);
break;
} else if (i === (students.length) -1){
print('<p>' + search + ' was not found.</p>');
notFound.push(search);
break;
}
}
}
The else if is checking for the end of the loop and considering the search failed:
//if you are at the end of the array (searched through all students)
else if (i === (students.length) -1){
//alert user that their search was not found
print('<p>' + search + ' was not found.</p>');
//push the failed search term into an array
notFound.push(search);
//break out of the loop, necessary because of the way the loop is
//written (while(true)) will go forever if not broken
break;
}
...it is -1 because an arrays first item starts at 0 while the length starts counting at 1 ;-)
So there is a difference oft -1.
Related
I am pulling some information from an API and one of my fields may or may not have duplicate content. How do I identify the redundancy and not print it on the screen if it's a duplicate?
Here's my loop, and "Description" is the field that sometimes has the same content as its previous sibling:
for (i = 0; i < data.length; i++) {
htmlString += '<li><h3 class="session-item">' + data[i].Title + '</h3>';
htmlString += '<p class="session-description">' + data[i].Description + '</p></li>';
}
Is this something I should check/compare with the previous sibling or is there a better way?
I tried a simple comparison but this didn't work:
var tempDesc = document.getElementsByClassName('session-description');
for (i = 0; i < data.length; i++) {
htmlString += '<li><h3 class="session-item">' + data[i].Title + '</h3>';
if(tempDesc === data[i].Description) {
htmlString += '</li>';
} esle {
htmlString += '<p class="session-description">' + data[i].Description + '</p></li>';
}
}
You already have the index so a simple solution is to get the last index with i - 1:
for (i = 0; i < data.length; i++) {
htmlString += '<li><h3 class="session-item">' + data[i].Title + '</h3>';
if (data[i].Description !== data[i - 1].Description) {
htmlString += '<p class="session-description">' + data[i].Description + '</p></li>';
} else {
htmlString += '</li>';
}
}
But you want to check if it data[i - 1] exists first:
if (data[i].Description !== (data[i - 1] && data[i - 1].Description)) {
If you want a shorter answer then you could use the more advanced optional chaining:
if (data[i].Description !== data[i - 1]?.Description) {
const isEqual = (...objects) => objects.every(obj => JSON.stringify(obj) === JSON.stringify(objects[0]));
data.reduce((x,y) => (x.filter(x => isEqual(x, y)).length > 0) ? x : x.concat([y]), []);
then, use data with every way you want, all elements are unique :)
Presuming your dataset looks something like this:
const apiResponse = [
{ Title: 'Sanity and Tallulah', Description: 'Description 1' },
{ Title: 'Zita the Space Girl', Description: 'Description 2' },
{ Title: 'Lumberjanes', Description: 'Description 1' },
];
...and I am understanding your goal correctly that you want to suppress duplicate descriptions but keep the titles, I would suggest one approach is to use a Set as you are looping to add to the DOM, and check to see if the description is already present in the Set before writing it. Something like:
const apiResponse = [
{ Title: 'Sanity and Tallulah', Description: 'Description 1' },
{ Title: 'Zita the Space Girl', Description: 'Description 2' },
{ Title: 'Lumberjanes', Description: 'Description 1' },
];
const descriptions = new Set();
for (let item of apiResponse) {
document.body.append(item.Title)
document.body.append(document.createElement('br'))
if (!descriptions.has(item.Description)) {
descriptions.add(item.Description);
document.body.append(item.Description)
document.body.append(document.createElement('br'))
document.body.append(document.createElement('br'))
}
}
This approach would allow a single loop and avoid having to do comparisons in/against the DOM as a source of truth.
Another option (explored in other answers already) is to first loop the responses and eliminate duplicate values and then loop to push to the DOM.
When creating new div with data from input form, the first div save the data that i inputed, but next, when i input new data, div display undefined value.
first attempt second attempt
0: {name: "Milk", amount: "30"}
name: "Milk"
amount: "30"
1: "expense"
2: "expense"
3: "expense"
document.getElementById('expenseInput').addEventListener('submit', saveExpense);
function saveExpense(e) {
let expenseName = document.getElementById('expenseNameInput').value,
expenseAmount = document.getElementById('expenseAmountInput').value;
let expenseStorage = {
name: expenseName,
amount: expenseAmount,
}
if (localStorage.getItem('expenses') == null) {
let expenses = [];
expenses.push(expenseStorage);
localStorage.setItem('expenses', JSON.stringify(expenses));
} else {
let expenses = JSON.parse(localStorage.getItem('expenses'));
expenses.push('expenseStorage');
localStorage.setItem('expenses', JSON.stringify(expenses));
}
document.getElementById('expenseInput').reset();
fetchExpense();
e.preventDefault();
}
function fetchExpense() {
let expenses = JSON.parse(localStorage.getItem('expenses')),
expensesList = document.getElementById('expensesList');
expensesList.innerHTML = '';
for (let i = 0; i < expenses.length; i++) {
let name = expenses[i].name,
amount = expenses[i].amount;
expensesList.innerHTML += '<div class="well" id="expense-item">' +
'<h3>' + name + '</h3>' +
'<h3>' + amount + '</h3>' +
'Delete' +
'</div>';
}
}
I'm rewriting code many times but it doesnt's work.
Try replacing expenses.push('expenseStorage') to expenses.push(expenseStorage).
So your code will look like this:
document.getElementById('expenseInput').addEventListener('submit', saveExpense);
function saveExpense(e) {
let expenseName = document.getElementById('expenseNameInput').value,
expenseAmount = document.getElementById('expenseAmountInput').value;
let expenseStorage = {
name: expenseName,
amount: expenseAmount,
}
if (localStorage.getItem('expenses') == null) {
let expenses = [];
expenses.push(expenseStorage);
localStorage.setItem('expenses', JSON.stringify(expenses));
} else {
let expenses = JSON.parse(localStorage.getItem('expenses'));
expenses.push(expenseStorage);
localStorage.setItem('expenses', JSON.stringify(expenses));
}
document.getElementById('expenseInput').reset();
fetchExpense();
e.preventDefault();
}
function fetchExpense() {
let expenses = JSON.parse(localStorage.getItem('expenses')),
expensesList = document.getElementById('expensesList');
expensesList.innerHTML = '';
for (let i = 0; i < expenses.length; i++) {
let name = expenses[i].name,
amount = expenses[i].amount;
expensesList.innerHTML += '<div class="well" id="expense-item">' +
'<h3>' + name + '</h3>' +
'<h3>' + amount + '</h3>' +
'Delete' +
'</div>';
}
}
I want a message to a prompt to appear asking the user to type in a student name. Javascript would look through the student record, which is in a separate JS file, and then output the student's information in the message variable.
Here is the relevant javascript code:
var students=[
{
name:'Chris',
track:'IOS',
achievements:'100',
points:'1000'
},
{
name:'John',
track:'Web Design',
achievements:'90',
points:'1000'
},
{
name:'Brent',
track:'Front-End',
achievements:'70',
points:'1000'
},
{
name:'Josh',
track:'Full-Stack',
achievements:80,
points:'1000'
},
{
name:'Nick',
track:'AI',
achievements:'60',
points:'1000'
}
];
function print(message) {
document.write(message);
}
var message="";
var flag=false;
var search=prompt("Type name of student. Type 'quit' to exit.");
while (search!=="quit") {
for (var i=0; i<students.length; i+=1) {
var studentName=students[i].name;
if (studentName===search) {
flag=true;
break;
}
}
if (flag) {
message+="<h1>"+studentName+"</h1>";
message+="<p>"+students[i].track+"</p>";
message+="<p>"+students[i].achievements+"</p>";
message+="<p>"+students[i].points+"</p>";
} else {
alert("That student does not exist. Try again");
search=prompt("Type name of student");
}
}
print(message);
I realize that I am close, however, my one issue that any variable I try to access from within the for loop will be local to that loop only. So how would my if and else conditions work if I can't access local for loop variables in my conditionals? I simply want it to find a match, once it does, stop the for loop and then proceed to use that specific element index.
I would drop the loop and use find() instead. This will return the found student object, or it will return undefined if the student was not found.
let student = students.find(s => s.name == search)
We can then put the code within a recursive function which will keep calling itself until the user finds a student or enters quit:
var students = [{
name: 'Chris',
track: 'IOS',
achievements: '100',
points: '1000'
},
{
name: 'John',
track: 'Web Design',
achievements: '90',
points: '1000'
},
{
name: 'Brent',
track: 'Front-End',
achievements: '70',
points: '1000'
},
{
name: 'Josh',
track: 'Full-Stack',
achievements: 80,
points: '1000'
},
{
name: 'Nick',
track: 'AI',
achievements: '60',
points: '1000'
}
];
function findStudent() {
let search = prompt("Type name of student. Type 'quit' to exit.");
// Exit the function if the user types 'quit'
if (search == 'quit') return
// Find the student
let student = students.find(s => s.name == search)
let message = "";
// If the student was found, write to the document
if (student) {
message += "<h1>" + student.name + "</h1>";
message += "<p>Track: " + student.track + "</p>";
message += "<p>Achievements: " + student.achievements + "</p>";
message += "<p>Points: " + student.points + "</p>";
document.body.innerHTML = message
}
// The student was not found
// Let the user know and call the function again
else {
alert("That student does not exist. Try again");
findStudent()
}
}
findStudent()
How about this?
var students = [...];
function format(student) {
return (
'<h1>' + student.name + '</h1>' +
'<p>' + student.track + '</p>' +
'<p>' + student.achievements + '</p>' +
'<p>' + student.points + '</p>'
);
}
function lookup(name) {
return students.find(function(student) {
return name === student.name
});
}
function print(message) {
document.write(message);
}
function searchPrompt() {
return prompt("Type name of student. Type 'quit' to exit.");
}
function run() {
var search = searchPrompt();
if (search === 'quit') {
return;
}
var student = lookup(search);
if (student) {
print(format(student));
} else {
alert("That student does not exist. Try again");
run();
}
}
run();
can someone explain why I am getting undefined in my loop? I am trying to run a loop that lets me know if its true if i've watched something as well as the rating. What am I doing wrong?
var films = [
{
movie: "fast and the furious",
rating: 4,
seen: true
},
{
movie:"13 reasons why",
rating: 5,
seen: true
},
{
movie:"beaty and the beast",
rating: 4,
seen: false
}
];
films.forEach(function(movie){
var result = "You have ";
if(movie.seen) {
result += "watched ";
}
else{
result += "not seen ";
}
result += "\"" + films.movie + "\" - ";
result += films.rating + " stars";
console.log(result);
});
You should access the element, not the array, in your iterator function:
films.forEach(function(movie) {
var result = "You have ";
if (movie.seen) {
result += "watched ";
} else {
result += "not seen ";
}
result += "\"" + movie.movie + "\" - ";
result += movie.rating + " stars";
});
You passing a movie parameter in your function. you should use this for result.
var films = [
{
movie: "fast and the furious",
rating: 4,
seen: true
},
{
movie:"13 reasons why",
rating: 5,
seen: true
},
{
movie:"beaty and the beast",
rating: 4,
seen: false
}
];
films.forEach(function(movie){
var result = "You have ";
if(movie.seen==true) {
result += "watched ";
}else{
result += "not seen ";
}
result += "\"" + movie.movie + "\" - ";
result += movie.rating + " stars";
console.log(result);
});
var films = [
{
movie: "fast and the furious",
rating: 4,
seen: true
},
{
movie:"13 reasons why",
rating: 5,
seen: true
},
{
movie:"beaty and the beast",
rating: 4,
seen: false
}
];
films.forEach(function(film){
var result = "You have ";
if(film.seen) {
result += "watched ";
}
else{
result += "not seen ";
}
result += "\"" + film.movie + "\" - ";
result += film.rating + " stars";
console.log(result);
});
Use some other variable to enter foreach and use same variable to read properties.
I have a simple program that stores student objects in an array and then print the students info to the webpage. I have a print method in my program which takes a parameter and access the div element and then sets elements inner html to the parameter passed to print the message. Please consider the code snippet to see where the document.write method working fine but not the print method.
var student;
var message = "";
var students =
[
{
name: "Alice",
track: "IOS",
achievements: "Bronze",
points: 20400
},
{
name: "Linda",
track: "Front End Development",
achievements: "Silver",
points: 26000
}
];
function print( msg )
{
var output = document.getElementById("output");
output.innerHTML = msg;
}
for( var i = 0; i < students.length; i++)
{
student = students[i];
message = "<h2> Student : " + student.name + "</h2>";
message += "<p> Track : " + student.track + "</p>";
message += "<p> Achievements : " + student.achievements + "</p>";
message += "<p> points : " + student.points + "</p>";
// print(message);
document.write(message);
}
<div id="output">
</div>
It's because your print method replaces the entire output div. So each iteration of the loop overwrites the previous ones output.
You can change:
output.innerHTML = msg;
to:
output.innerHTML += msg;
and it will work correctly.
It works just fine you just need to respect the text currently in the div.
I added a += to the innerHtml call to append the new text
var student;
var message = "";
var students =
[
{
name: "Alice",
track: "IOS",
achievements: "Bronze",
points: 20400
},
{
name: "Linda",
track: "Front End Development",
achievements: "Silver",
points: 26000
}
];
function print( msg )
{
var output = document.getElementById("output");
output.innerHTML += msg;
}
for( var i = 0; i < students.length; i++)
{
student = students[i];
message = "<h2> Student : " + student.name + "</h2>";
message += "<p> Track : " + student.track + "</p>";
message += "<p> Achievements : " + student.achievements + "</p>";
message += "<p> points : " + student.points + "</p>";
print(message);
// document.write(message);
}
<div id="output">
</div>
In this case, your print method is substituting the innerHTML of output each time you call it.
Therefore, if you call print inside a loop, the only displayed result will be the last item on the loop.
If you add a + to the method, you will get what you want. You will need a method to clear the div later on, though.
var student;
var message = "";
var students = [{
name: "Alice",
track: "IOS",
achievements: "Bronze",
points: 20400
},
{
name: "Linda",
track: "Front End Development",
achievements: "Silver",
points: 26000
}
];
function print(msg) {
var output = document.getElementById("output");
output.innerHTML += msg;
}
for (var i = 0; i < students.length; i++) {
student = students[i];
message = "<h2> Student : " + student.name + "</h2>";
message += "<p> Track : " + student.track + "</p>";
message += "<p> Achievements : " + student.achievements + "</p>";
message += "<p> points : " + student.points + "</p>";
print(message);
}
<div id="output">
</div>