How to loop through a Json objects based on an input from the user and then use the object properties?

Question

I am new to JavaScript and I'm trying to make a website where a student types in his student id, and the website will show which exercises he has handed in. I can loop through all the students and check if they have handed in an exercise, but I want to know how to check if the input value, matches with one of the students ids, then show which exercises that one person has completed.

Here is a pen code of my current code: http://codepen.io/lefty11/pen/aBdXJo

var students = [
{"Name":"John","Last_Name":"Bazel","StudentId":"s123456","HandIn1":"ok","HandIn2":"not ok","HandIn3":"ok"},
{"Name":"Sara","Last_Name":"Black","StudentId":"s123457","HandIn1":"not ok","HandIn2":"ok","HandIn3":"ok"},
{"Name":"Alex","Last_Name":"Semar","StudentId":"s123458","HandIn1":"ok","HandIn2":"ok","HandIn3":"not ok"}
];

function getStudent(){
  var inputValue = document.getElementById("user_input").value;
  if(students.StudentId == inputValue){
    checkOblig();
  }
}
function checkOblig(){
  var i;
  for(i = 0; i < students.length; i++){
    if(students[i].HandIn1 == "ok"){
      document.write(" Oblig1 Completed ");
    }
    }
  }
  checkOblig();

-

     <form>
    <label><b>Enter Your Student Id</b></label>
    <input type="text" name="message" id="user_input">
  </form>
  <input type="submit" id="sumbit" value="Submit">

The same way you check whether they handed in their assignment. `students.StudentId == inputValue` looks wrong btw. Have a look at [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/q/11922383/218196) — Felix Kling, Nov 11 '16 at 16:10
Thank you! I'll try that! + I'll have a look at the link too! — lefty, Nov 11 '16 at 21:58

score 0 · Answer 1 · answered Nov 11 '16 at 16:38

0

I rewrite your code:

http://codepen.io/anon/pen/jVWJaO

I'm using a library called underscore.js to find your student using the value of your textbox user_input. Example using findWhere:

document.getElementById("user_input").value;
var selectedStudent =_.findWhere(students, {StudentId: inputValue});

It makes easy and clear to search. Hope it helps

answered Nov 11 '16 at 16:38

Thales Chemenian

138
1
8

Thank you for the response! It looks pretty clean and easy, but i am not allowed to use external libraries! thank you again! – lefty Nov 11 '16 at 21:56

score 0 · Answer 2 · answered Nov 14 '16 at 14:31

I am changing the submit button to input type and calling the method onClick event event. Also, for studentId comparison, you need to loop through your JSON

var students = [
{"Name":"John","Last_Name":"Bazel","StudentId":"s123456","HandIn1":"ok","HandIn2":"not ok","HandIn3":"ok"},
{"Name":"Sara","Last_Name":"Black","StudentId":"s123457","HandIn1":"not ok","HandIn2":"ok","HandIn3":"ok"},
{"Name":"Alex","Last_Name":"Semar","StudentId":"s123458","HandIn1":"ok","HandIn2":"ok","HandIn3":"not ok"}
];

function getStudent(){
  var inputValue = document.getElementById("user_input").value;
  for(i = 0; i < students.length; i++){
      if(students[i].StudentId == inputValue){
        if(students[i].HandIn1 == "ok"){
            document.write(" Oblig1 Completed ");
        }
      }
  }
}

And the HTML snippet

<form>
    <label><b>Enter Your Student Id</b></label>
    <input type="text" name="message"   id="user_input">
</form>
<input type="button" id="sumbit" value="Submit" onClick="getStudent()">

Thank you so much! With your code it works pretty well! Have a nice day — lefty, Nov 14 '16 at 21:50

Weedoze · Accepted Answer · 2016-11-15T12:19:48.047

You first need to iterate over each student to find the one with the entered ID.

When you found it you can check his exercises status

var students = [{
  "Name": "John",
  "Last_Name": "Bazel",
  "StudentId": "s123456",
  "HandIn1": "ok",
  "HandIn2": "not ok",
  "HandIn3": "ok"
}, {
  "Name": "Sara",
  "Last_Name": "Black",
  "StudentId": "s123457",
  "HandIn1": "not ok",
  "HandIn2": "ok",
  "HandIn3": "ok"
}, {
  "Name": "Alex",
  "Last_Name": "Semar",
  "StudentId": "s123458",
  "HandIn1": "ok",
  "HandIn2": "ok",
  "HandIn3": "not ok"
}];

var exercices = ["HandIn1","HandIn2","HandIn3"];

function checkOblig() {
  var inputValue = document.getElementById("user_input").value.trim();
  if (inputValue === "")
    alert("Please enter your ID");

  let student = null;
  for (let i = 0; i < students.length; i++) {
    let student = students[i];
    if (student.StudentId === inputValue) {
      checkExercice(student);
    }
  }
}

function checkExercice(student){
  exercices.forEach(function(item){
    if(student[item] === "ok"){
      console.log("Exercice : " + item + " done !");  
    }else{
      console.log("Exercice : " + item + " NOT done !");  
    }
  })
}

<form>
  <label><b>Enter Your Student Id</b>
  </label>
  <input type="text" name="message" id="user_input">
</form>
<input type="submit" id="sumbit" value="Submit" onclick="checkOblig()">

EDIT

The list of exercices is now stored inside an array

Note: You should think about replacing ok and not ok by true and false

Much appreciated help! I can't thank you enough! wish you a good day! :) — lefty, Nov 14 '16 at 21:40
@lefty No problem. However you should rethink the way you check the exercice. If you have 10 exercices it will be ugly to put 10 `if else` — Weedoze, Nov 15 '16 at 07:19
I've been trying to reduce the amount of the "if else" after reading your comment, because as you said there will be at least 10 exercises. What I came up with is to make an array of all the exercises(Hand-In), and loop through the array and check if the value is equal to "ok". But I am not able to do it correctly. Here is the code(I am sorry I couldn't write the code here): http://codepen.io/lefty11/pen/xROQBq — lefty, Nov 15 '16 at 12:13

How to loop through a Json objects based on an input from the user and then use the object properties?

3 Answers3