matching search result with user input in JavaScript object

Question

I want to match the object name when it is match by user input or quit if user type quit , but when I type correct name it does not show student information, I did not find any error, can somebody tell me what is wrong with my code .advance thanks.

let students = [{
  Name: "golam Rabbani",
  track: "web design",
  Achievement: "2 badge",
  Point: 10,
}, {
  Name: " Rabbani",
  track: "frontend",
  Achievement: "2 badge",
  Point: 70,
}, {
  Name: "golam",
  track: "backhend",
  Achievement: "2 badge",
  Point: 50,
}, {
  Name: "Rocky",
  track: "web design",
  Achievement: "2 badge",
  Point: 1000,
}, {
  Name: " Rony",
  track: "IOS",
  Achievement: "2 badge",
  Point: 100,
}, ];

var student;
var message = "";
var search;

function print(message) {
  let output = document.querySelector(".output");
  output.innerHTML = message;
}
while (true) {
  search = prompt("enter your name or type (quit) to leave the program");
  var leave = "quit";
  if (search === null || search.toLowerCase() === leave) {
    break;
  }
  for (var i = 0; i < students.length; i++) {
    student = students[i];
    if (student.Name === search) {
      message += "<li> student:" + student.Name + "</li>";
      message += "<p> track:" + student.track + "</p>";
      message += "<p> point:" + student.point + "</p>";
      message += "<p> Achievement:" + student.Achievement + "</p>";
      print(message);
    }
  }
}

not working browser does not show student information while searching by name — Golam Rabbani
– Golam Rabbani, Commented Mar 5, 2021 at 5:05
The problem is you are invoking the prompt recursively in a loop, DOM element will update only when your script execution completed. check this stackoverflow.com/a/66487042/4021490 — Selvam M
– Selvam M, Commented Mar 5, 2021 at 5:08
finally works with the previous code. user input is case sensitive when copy the property and past on the user input box it works fine.Thank you so much — Golam Rabbani
– Golam Rabbani, Commented Mar 5, 2021 at 5:09

Selvam M · Accepted Answer · 2021-03-05 04:59:22Z

The problem is you are invoking the prompt recursively in a loop, DOM element will update only when your script execution completed.

let students = [{
  Name: "golam Rabbani",
  track: "web design",
  Achievement: "2 badge",
  Point: 10,
}, {
  Name: " Rabbani",
  track: "frontend",
  Achievement: "2 badge",
  Point: 70,
}, {
  Name: "golam",
  track: "backhend",
  Achievement: "2 badge",
  Point: 50,
}, {
  Name: "Rocky",
  track: "web design",
  Achievement: "2 badge",
  Point: 1000,
}, {
  Name: " Rony",
  track: "IOS",
  Achievement: "2 badge",
  Point: 100,
}, ];

var student;
var message = "";
var search;

function print(message) {
  let output = document.querySelector(".output");
  output.innerHTML = message;
}
while (true) {
  search = prompt("enter your name or type (quit) to leave the program");
  var leave = "quit";
  if (search === null || search.toLowerCase() === leave) {
    break;
  }
  let flag=false;
  
  for (var i = 0; i < students.length; i++) {
    student = students[i];
    if (student.Name === search) {
      message += "<li> student:" + student.Name + "</li>";
      message += "<p> track:" + student.track + "</p>";
      message += "<p> point:" + student.point + "</p>";
      message += "<p> Achievement:" + student.Achievement + "</p>";
      print(message);
      flag=true;
    }
  }
  if(flag)
   break;
}

<html>
<head>

<body>

<ul class="output"></ul>

</body>
</head>

</html>

Here I have added a flag variable to break the execution when a user enters the correct name.

Carsten Massmann · Accepted Answer · 2021-03-05 04:56:16Z

You need to tidy up your code a bit:

There are some blanks in some of your Name properties which makes them hard to find
your search is case-sensitive which is also hard on the user
you define the property Point but later try to find point
your HTML was missing in the snippet

If your take care of the above points you script should work.

let students = [{
  Name: "golam Rabbani",
  track: "web design",
  Achievement: "2 badge",
  Point: 10,
}, {
  Name: " Rabbani",
  track: "frontend",
  Achievement: "2 badge",
  Point: 70,
}, {
  Name: "golam",
  track: "backhend",
  Achievement: "2 badge",
  Point: 50,
}, {
  Name: "Rocky",
  track: "web design",
  Achievement: "2 badge",
  Point: 1000,
}, {
  Name: " Rony",
  track: "IOS",
  Achievement: "2 badge",
  Point: 100,
}, ];

var student;
var message = "";
var search;

function print(message) {
  let output = document.querySelector(".output");
  output.innerHTML = message;
}
while (true) {
  search = prompt("enter your name or type (quit) to leave the program");
  var leave = "quit";
  if (search === null || search.toLowerCase() === leave) {
    break;
  }
  for (var i = 0; i < students.length; i++) {
    student = students[i];
    if (student.Name === search) {
      message += "<li> student:" + student.Name + "</li>";
      message += "<p> track:" + student.track + "</p>";
      message += "<p> point:" + student.point + "</p>";
      message += "<p> Achievement:" + student.Achievement + "</p>";
      print(message);
    }
  }
}

<ul class="output"></ul>

Sen Maku · Accepted Answer · 2021-03-05 04:59:02Z

because you do not pass "message" data that you get to the html tags

    let students = [{
      Name: "golam Rabbani",
      track: "web design",
      Achievement: "2 badge",
      Point: 10,
    }, {
      Name: " Rabbani",
      track: "frontend",
      Achievement: "2 badge",
      Point: 70,
    }, {
      Name: "golam",
      track: "backhend",
      Achievement: "2 badge",
      Point: 50,
    }, {
      Name: "Rocky",
      track: "web design",
      Achievement: "2 badge",
      Point: 1000,
    }, {
      Name: "Rony",
      track: "IOS",
      Achievement: "2 badge",
      Point: 100,
    }, ];

    var student;
    var message = "";
    var search;

    function print(message) {
      let output = document.querySelector(".output");
      output.innerHTML = message;
    }

    while (true) {
      search = prompt("enter your name or type (quit) to leave the program");
      var leave = "quit";
      if (search === null || search.toLowerCase() === leave) {
        break;
      }
      else{
          for (var i = 0; i < students.length; i++) {
            student = students[i];
            if (student.Name === search) {
              message += "<li> student:" + student.Name + "</li>";
              message += "<p> track:" + student.track + "</p>";
              message += "<p> point:" + student.Point + "</p>";
              message += "<p> Achievement:" + student.Achievement + "</p>";
              print(message);
             }
          }
        }
    }

let students = [{
          Name: "golam Rabbani",
          track: "web design",
          Achievement: "2 badge",
          Point: 10,
        }, {
          Name: " Rabbani",
          track: "frontend",
          Achievement: "2 badge",
          Point: 70,
        }, {
          Name: "golam",
          track: "backhend",
          Achievement: "2 badge",
          Point: 50,
        }, {
          Name: "Rocky",
          track: "web design",
          Achievement: "2 badge",
          Point: 1000,
        }, {
          Name: "Rony",
          track: "IOS",
          Achievement: "2 badge",
          Point: 100,
        }, ];

        var student;
        var message = "";
        var search;

        function print(message) {
          let output = document.querySelector(".output");
          output.innerHTML = message;
        }

        while (true) {
          search = prompt("enter your name or type (quit) to leave the program");
          var leave = "quit";
          if (search === null || search.toLowerCase() === leave) {
            break;
          }
          else{
              for (var i = 0; i < students.length; i++) {
                student = students[i];
                if (student.Name === search) {
                  message += "<li> student:" + student.Name + "</li>";
                  message += "<p> track:" + student.track + "</p>";
                  message += "<p> point:" + student.Point + "</p>";
                  message += "<p> Achievement:" + student.Achievement + "</p>";
                  print(message);
                 }
              }
            }
        }

<ul class="output"><ul>

Paaarth · Accepted Answer · 2021-03-05 04:59:58Z

let students = [{
  Name: "golam Rabbani",
  track: "web design",
  Achievement: "2 badge",
  Point: 10,
}, {
  Name: " Rabbani",
  track: "frontend",
  Achievement: "2 badge",
  Point: 70,
}, {
  Name: "golam",
  track: "backhend",
  Achievement: "2 badge",
  Point: 50,
}, {
  Name: "Rocky",
  track: "web design",
  Achievement: "2 badge",
  Point: 1000,
}, {
  Name: " Rony",
  track: "IOS",
  Achievement: "2 badge",
  Point: 100,
}];
var message = "";
let userInput = prompt('enter your name or type (quit) to leave the program');
if (userInput) {
  userInput = userInput.trim();
  for (var i = 0; i < students.length; i++) {
    var userInputTrim = students[i].Name.trim();
    if (userInputTrim === userInput) {
      message += "<li> student:" + students[i].Name + "</li>";
      message += "<p> track:" + students[i].track + "</p>";
      message += "<p> point:" + students[i].point + "</p>";
      message += "<p> Achievement:" + students[i].Achievement + "</p>";
      print(message);
    }
  }
} else {
  alert('Please enter value!');
}

function print(message) {
  let output = document.querySelector(".output");
  output.innerHTML = message;
}

<div class='output'></div>

Collectives™ on Stack Overflow

matching search result with user input in JavaScript object

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related