use html onclick submit button, to search js array and then display specific data back in the original html div

Question

have being watching youtube videos trying to learn how to search array for specific entry data?

here below is a js array example using console.log

Js array example:

    var data = {
  username: "john",
  email: "[email protected]",
  status: true,
  id: 25
};

var data = {
  username: "jIM",
  email: "[email protected]",
  status: false,
  id: 23
};

var data = {
  username: "Jane",
  email: "[email protected]",
  status: false,
  id: 22
};

{
  console.log(data);
}

here below is html which I want to make it show specific result from above js array with onclick submit button to search array? and then display/print back in the html div.

<html>
<head>
<title>get value</title>


    <script type="text/javascript">
    function getDisplay(){
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    document.getElementById("display").innerHTML = "username" +  username + "<br/>email" + email;
    }
</script>

</head>
<body>

  <div id="whole">
        Username : <input type="text" name="username" id="username">

        Email : <input type="email" name="email" id="email"></br>


        <button onclick=getDisplay()>Submit</button>

  </div>
  <div id="display">
  </div>


</body>
</html>

if you can recommend any videos or things to read to help me learn would be greatly appreciated.

The array example you posted is not an actual array. It is an object that is defined multiple times. If you want to declare an array you need to use the [ ] notation. — tomerpacific
– tomerpacific, Commented Feb 4, 2019 at 10:59
@tomerpacific => if you can recommend any videos or things to read to help me learn would be greatly appreciated. where do I put the square brackets for example? — zip
– zip, Commented Feb 4, 2019 at 11:02

Blaze · Accepted Answer · 2019-02-04 11:14:51Z

0

Firstly what you do is not an array, you want this array-object like this:

var data=[{
          username: "john",
          email: "[email protected]",
          status: true ,
          id: 25
         },
         {
         username: "jIM",
         email: "[email protected]",
         status: false,
         id: 23
         }];

As you can see this is an array with obejcts, now you can work with it. Use Object.keys(data).

answered Feb 4, 2019 at 11:14

Blaze

945 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vasu Kuncham · Accepted Answer · 2019-02-04 11:28:24Z

Assuming your json should be like this. and your search logic will look like this.

var data = [
  {
    username: "john",
    email: "[email protected]",
    status: true,
    id: 25
  },
  {
    username: "jIM",
    email: "[email protected]",
    status: false,
    id: 23
  },
  {
    username: "Jane",
    email: "[email protected]",
    status: false,
    id: 22
  }
];


function getDisplay(){
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;

    data.forEach(function(item, index){
      if((item.username == username) && (item.email == email)) {
        var displayData = "<li><b>User Name</b>: "+ item.username +"</li>"+
              "<li><b>EMail</b>: "+ item.email +"</li>"+
              "<li><b>Status</b>: "+ item.status +"</li>"+
              "<li><b>ID</b>: "+ item.id +"</li>";     
        $("#display").html(displayData);
      }
    });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="whole">
  Username : <input type="text" name="username" id="username"></br>
  Email : <input type="email" name="email" id="email"></br>
  <button onclick=getDisplay()>Submit</button>
</div>
<div id="display"></div>

jhpratt · Accepted Answer · 2019-07-20 00:30:33Z

An array of objects should look like this:

      var arr = [{
                  username: "john",
                  email: "[email protected]",
                  status: true,
                  id: 25
                 },
                {
                  username: "jIM",
                  email: "[email protected]",
                  status: false,
                  id: 23
                },
                {
                  username: "Jane",
                  email: "[email protected]",
                  status: false,
                  id: 22
                }
               ]

And in your code you want to do the following :

    <html>
     <head>
        <title>get value</title>


    <script type="text/javascript">

    var arr = [/*Your data here */];

    function getDisplay(){
           var username = document.getElementById("username").value;
           var email = document.getElementById("email").value;

           document.getElementById("display").innerHTML = "username" +  username + "<br/>email" + email;

      for(let i = 0; i < arr.length; i++) {
          let element = arr[i];
          //Your search logic goes here
      }
    }
</script>

</head>
  <body>

      <div id="whole">
              Username : <input type="text" name="username" id="username">

        Email : <input type="email" name="email" id="email"></br>


        <button onclick=getDisplay()>Submit</button>

  </div>
  <div id="display">
  </div>


</body>
</html>

Collectives™ on Stack Overflow

use html onclick submit button, to search js array and then display specific data back in the original html div

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related