stackoom
  简体   繁体   中英

how to turn my if statements in to a foor loop

 原文  2020-12-15 14:06:42  2   5    javascript/ json/ loops

Question

its not really a problem at the moment, its just that im after another solution. Surely there must be a smarter way for me then to write every student with an if questions as I have done here to get their grades.

If I want to get the same result but with a for loop? how would I go on doing that? any smart suggestions? 

 var nameandgrades = { "students": [{ "namn": "Klara", "grade": "A" }, { "namn": "Andrea", "grade": "B" }, { "namn": "Emil", "grade": "C" } ] }; var klara = "Klara"; var andrea = "Andrea"; var emil = "Emil"; function getGrade() { var studentname = document.getElementById("studentname").value; if (studentname == klara) { document.getElementById("output").innerHTML = nameandgrades.students[0].grade + ' '; } if (studentname == andrea) { document.getElementById("output").innerHTML = nameandgrades.students[1].grade + ' '; } if (studentname == emil) { document.getElementById("output").innerHTML = nameandgrades.students[1].grade + ' '; } }
 <;DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>json javascript</title> </head> <body> <h1> Write the students name and see what grade he/she has! </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="getGrade();" /> <br /> <br> </form> <div id="output"> </div> </body> </html>

Any help is much appreciated!

Cheers! //macgajver

5 answers

solution1
 2 ACCPTED  2020-12-15 14:11:45

You want to get that object from array of students whose names matches with the name given in the input.

  • Store the value of input in variable.
  • Use find() on nameandgrades.students and check if object name property matches which input value.
  • After you get that object get its grade and output it.

Some other tips are:

  • Declare the html elements in global scope so that you don't get them every time the button is clicked.
  • Use const for the objects and html elements delaration.
  • Before accessing grade check if object is found or not otherwise it will result in an error. 

 const input = document.getElementById("studentname"); const output = document.getElementById("output") const nameandgrades = { "students": [{ "name": "Klara", "grade": "A" }, { "name": "Andrea", "grade": "B" }, { "name": "Emil", "grade": "C" } ] }; function showGrade() { let name = input.value let object = nameandgrades.students.find(x => x.name === name); let grade; if(object){ grade = object.grade } output.innerHTML = grade || "Sorry student not found" }
 <h1> Write the students name and see what grade he/she has; </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="showGrade();" /> <br /> <br> </form> <div id="output"> </div>

solution2
 0  2020-12-15 14:14:27

You can use forEach to iterate over your students and compare the name with the one from your input.

if they are equal write out the grade

 var nameandgrades = { "students": [{ "namn": "Klara", "grade": "A" }, { "namn": "Andrea", "grade": "B" }, { "namn": "Emil", "grade": "C" } ] }; var klara = "Klara"; var andrea = "Andrea"; var emil = "Emil"; function getGrade() { var studentname = document.getElementById("studentname").value; nameandgrades.students.forEach((stud)=>{ if(studentname === stud.namn){ document.getElementById("output").innerHTML = stud.grade + ' '; } }) }
 <;DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>json javascript</title> </head> <body> <h1> Write the students name and see what grade he/she has! </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="getGrade();" /> <br /> <br> </form> <div id="output"> </div> </body> </html>

Also you can use the old fashioned way and maybe the beginners friendlyst way for(let i = 0; i<array.length; i++) 

 var nameandgrades = { "students": [{ "namn": "Klara", "grade": "A" }, { "namn": "Andrea", "grade": "B" }, { "namn": "Emil", "grade": "C" } ] }; var klara = "Klara"; var andrea = "Andrea"; var emil = "Emil"; function getGrade() { var studentname = document.getElementById("studentname").value; for (let i = 0; i <nameandgrades.students.length; i++){ if(studentname === nameandgrades.students[i].namn){ document.getElementById("output").innerHTML = nameandgrades.students[i].grade + ' '; } } }
 <;DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>json javascript</title> </head> <body> <h1> Write the students name and see what grade he/she has! </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="getGrade();" /> <br /> <br> </form> <div id="output"> </div> </body> </html>

solution3
 0  2020-12-15 14:15:36

You can update your getGrade function as follows:

function getGrade() {
    var studentname = document.getElementById("studentname").value;

    for (var student of nameandgrades.students) {
      if (studentname == student.name) {
        document.getElementById("output").innerHTML = student.grade + ' ';
        return;
      }
    }
    
    document.getElementById("output").innerHTML = 'Student not found!';
}


 var nameandgrades = { "students": [{ "name": "Klara", "grade": "A" }, { "name": "Andrea", "grade": "B" }, { "name": "Emil", "grade": "C" } ] }; var klara = "Klara"; var andrea = "Andrea"; var emil = "Emil"; function getGrade() { var studentname = document.getElementById("studentname").value; for (var student of nameandgrades.students) { if (studentname == student.name) { document.getElementById("output").innerHTML = student.grade + ' '; return; } } document.getElementById("output").innerHTML = 'Student not found;'; }
 <;DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>json javascript</title> </head> <body> <h1> Write the students name and see what grade he/she has! </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="getGrade();" /> <br /> <br> </form> <div id="output"> </div> </body> </html>

solution4
 0  2020-12-15 14:18:10

You can use a for loop and save the index of the found student, or you can use for (var student of nameandgrades.students)

Please don't name your variables in non-english names. Took me a minute to see that you use "namn" instead of "name" as properties for the name

 var nameandgrades = { "students": [{ "namn": "Klara", "grade": "A" }, { "namn": "Andrea", "grade": "B" }, { "namn": "Emil", "grade": "C" } ] }; var klara = "Klara"; var andrea = "Andrea"; var emil = "Emil"; function getGrade() { var studentname = document.getElementById("studentname").value; for (var student of nameandgrades.students) { console.log(student, studentname) if (student.namn == studentname) { document.getElementById("output").innerHTML = student.grade + ' '; break; } } }
 <;DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>json javascript</title> </head> <body> <h1> Write the students name and see what grade he/she has! </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="getGrade();" /> <br /> <br> </form> <div id="output"> </div> </body> </html>

solution5
 0  2020-12-15 14:20:59

Other answers are great, but thought it nice to add some extra sanity checks, like allowing klara or Klara , and if a name is not found check. 

 var nameandgrades = { "students": [{ "namn": "Klara", "grade": "A" }, { "namn": "Andrea", "grade": "B" }, { "namn": "Emil", "grade": "C" } ] }; function getGrade() { const name = document.getElementById("studentname").value.toLowerCase(); const student = nameandgrades.students.find(x => x.namn.toLowerCase() === name); document.getElementById('output').innerHTML = student? student.grade: 'Student not found'; }
 <h1> Write the students name and see what grade he/she has; </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="getGrade();" /> <br /> <br> </form> <div id="output"> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Cant get my foor loop working how i+=i works in a foor loop? How do I turn my "for" loop into a "for of" loop? onmouseover for menu created with foor loop XSL unable to parse foor loop How to fix my while loop with if statements in Javascript JavaScript, JSON - How Can I run a foor loop a specific ammount of time? Cypress wait for an element to be loaded inside a foor loop Synchronous Multiple Requests in foor loop with Node js how can I turn two statements into a ternary
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM