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

问题

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: "28@GSDF.COM",
  status: true,
  id: 25
};

var data = {
  username: "jIM",
  email: "27@GSDF.COM",
  status: false,
  id: 23
};

var data = {
  username: "Jane",
  email: "25@GSDF.COM",
  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.

回答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).

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

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

来源：https://stackoverflow.com/questions/54514659/use-html-onclick-submit-button-to-search-js-array-and-then-display-specific-dat

标签

javascript

arrays