Skip to content Skip to sidebar Skip to footer
Home / Arrays / Javascript / Search

Use Html Onclick Submit Button, To Search Js Array And Then Display Specific Data Back In The Original Html Div

Post a Comment
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 =

Solution 1:

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

vardata=[{username:"john",email:"28@GSDF.COM",status:true,id:25},
         {
         username:"jIM",
         email:"27@GSDF.COM",
         status:false,
         id:23
         }];

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

Solution 2:

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

var data = [
  {
    username: "john",
    email: "28@GSDF.COM",
    status: true,
    id: 25
  },
  {
    username: "jIM",
    email: "27@GSDF.COM",
    status: false,
    id: 23
  },
  {
    username: "Jane",
    email: "25@GSDF.COM",
    status: false,
    id: 22
  }
];


functiongetDisplay(){
    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);
      }
    });

}
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="whole">
  Username : <inputtype="text"name="username"id="username"></br>
  Email : <inputtype="email"name="email"id="email"></br><buttononclick=getDisplay()>Submit</button></div><divid="display"></div>

Solution 3:

An array of objects should look like this:

vararr= [{
                  username:"john",
                  email:"28@GSDF.COM",
                  status:true,
                  id:25
                 },
                {
                  username:"jIM",
                  email:"27@GSDF.COM",
                  status:false,
                  id:23
                },
                {
                  username:"Jane",
                  email:"25@GSDF.COM",
                  status:false,
                  id:22
                }
               ]

And in your code you want to do the following :

<html><head><title>get value</title><scripttype="text/javascript">var arr = [/*Your data here */];

    functiongetDisplay(){
           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><divid="whole">
              Username : <inputtype="text"name="username"id="username">

        Email : <inputtype="email"name="email"id="email"></br><buttononclick=getDisplay()>Submit</button></div><divid="display"></div></body></html>

Post a Comment for "Use Html Onclick Submit Button, To Search Js Array And Then Display Specific Data Back In The Original Html Div"