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

April 12, 2023 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:

var data=[{
          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
  }
];


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>

Baca Juga

Solution 3:

An array of objects should look like this:

      var arr = [{
                  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>


    <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>

javascript dozent

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

Solution 1:

Solution 2:

Solution 3:

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