how to turn my if statements in to a foor loop

user_14803182 0
Viewed 89

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

loops json javascript
5 Answers

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>

user_98191460

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>

user_147470390

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>

user_81632020

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>

user_55395770

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>

user_68702280
Related