TechQA.

Button to find elements in an Array

49 views Asked by At

I am trying to make a site where the user can hit a button and it will return data from the array. For example, a button called 'show male dogs' should bring back the 3 male dogs in the array.

I am not seeing any errors, but nothing happens when I click the button.

<!DOCTYPE html>
<html lang="en">
 <body>  
  <main> 
   <br> <!-- ******************* Button *********************** -->
   <button onclick="showMales()"> # Show Male Dogs </button>
   <p id="btn"></p>

    <br> <!-- ******************* JS Code *********************** -->
    <script>
     const dogArray = [
      {Name: "Boris", Gender: "Male", Age: "Senior", Breed: "Labrador", Link:    "Boris.html"},
      {Name: "Lucy", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Lucy.html"},
      {Name: "Daisy", Gender: "Female", Age: "Senior", Breed: "Golden Retriever", Link: "Daisy.html"}, 
      {Name: "Honey", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Honey.html"}, 
      {Name: "Harley", Gender: "Male", Age: "Senior", Breed: "Labrador", Link: "Haryley.html"}, 
      {Name: "Dolly", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Dolly.html"},
      {Name: "Max", Gender: "Male", Age: "Senior", Breed: "Golden Retriever", Link: "Max.html"}, 
      {Name: "Birdie", Gender: "Female", Age: "Senior", Breed: "Pregnant Hog", Link: "Birdie.html"}, 
      ];

      function showMales(dog) {
      return dog.Gender === "Male";
      }

      console.log(dogArray.find(showMales));
    </script>
 </main>           
</body>
javascript html arrays button find
Original Q&A
2

There are 2 answers

2
zambranodanniel On

You need to use the filter function instead of the find. The find function should return the first match while filter get all the records matched with the condition

<!DOCTYPE html>
<html lang="en">
 <body>  
  <main> 
   <br> <!-- ******************* Button *********************** -->
   <button onclick="showMales()"> # Show Male Dogs </button>
   <ul id="list"></ul>

    <br> <!-- ******************* JS Code *********************** -->
    <script>
     const dogArray = [
      {Name: "Boris", Gender: "Male", Age: "Senior", Breed: "Labrador", Link:    "Boris.html"},
      {Name: "Lucy", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Lucy.html"},
      {Name: "Daisy", Gender: "Female", Age: "Senior", Breed: "Golden Retriever", Link: "Daisy.html"}, 
      {Name: "Honey", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Honey.html"}, 
      {Name: "Harley", Gender: "Male", Age: "Senior", Breed: "Labrador", Link: "Haryley.html"}, 
      {Name: "Dolly", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Dolly.html"},
      {Name: "Max", Gender: "Male", Age: "Senior", Breed: "Golden Retriever", Link: "Max.html"}, 
      {Name: "Birdie", Gender: "Female", Age: "Senior", Breed: "Pregnant Hog", Link: "Birdie.html"}, 
      ];

      function showMales() {
        const listDogs = document.getElementById('list');
        listDogs.innerHTML = '';
        var dogs = dogArray
          .filter(dog => dog.Gender === "Male")
          .map(dog => {
            let listItem = document.createElement('li');
            listItem.textContent = dog.Name;
            listDogs.appendChild(listItem);
            return dog;
          });
        console.log(dogs);
      }
    </script>
 </main>           
</body>

0
Zevahc On

You could try filter the result first before printing it, something like this:

 const maleDogs = dogArray.filter(dog => dog.Gender === "Male");

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ARRAYS

Related Questions in BUTTON

Related Questions in FIND

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions