Populate Dropdown from JSON Data in JavaScript-CodePudding

I am trying to populate my dropdown menu with the information data in my js file. Each time i click on the button, 3 objects are added to the dropdown. I only want the three to show whenever I click. I am also getting just [object object], no real value. What am I missing?

index.js


const information = [
{
"gender": "prefer not to say",
"age": "20"
},
{
"gender": "female",
"age": "9"
},
{
"gender": "male",
"age": "18"
}
];

  const dropDownDisplay = () => {
        
    for(i=0; i<information.length; i  ){
  
      const item = document.createElement("a");
      item.setAttribute("class","dropdown-item");
      item.href = "#"; 
      const node = document.createTextNode(information[i]); 
      item.appendChild(node);
      document.getElementsByClassName('dropdown-menu')[0].appendChild(item);
      console.log(item)
  
    }
  }

  const dropdownMenuButton = document.getElementById("dropdownMenuButton");
dropdownMenuButton.addEventListener("click", (event) => dropDownDisplay());

}

index.html


<div >
<button  type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Info:
</button>
<ul  aria-labelledby="dropdownMenuButton">
<li><a  href="#"></a></li>
<li><a  href="#"></a></li>
<li><a  href="#"></a></li>
</ul>
</div>

enter image description here

CodePudding user response：

I hope it is fine now. For future - if you pass object, you need to specify which key/value pair you need (Example: information[i].gender). Otherwise will get a reference to an object [object Object] index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div >
        <button  type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Info:
        </button>
        <ul  aria-labelledby="dropdownMenuButton">
        <li><a  href="#">123</a></li>
        <li><a  href="#">123</a></li>
        <li><a  href="#">123</a></li>
        </ul>
        </div>
    <script src="main.js"></script>
</body>
</html>

main.js

const information = 
[
  {
    "gender": "prefer not to say",
    "age": "20",
  },
  {
    "gender": "female",
    "age": "9",
  },
  {
    "gender": "male",
    "age": "18",
  }
];

const dropDownDisplay = () => {
  for (i = 0; i < information.length; i  ) {
    const dropdown = document.querySelector('.dropdown-menu')
    if(dropdown.classList.contains('d-none'))
    {
      dropdown.classList.add('d-block')
      dropdown.classList.remove('d-none')
    }
    else{
      dropdown.classList.add('d-none')
      dropdown.classList.remove('d-block')
    }
    const items = document.querySelectorAll('.dropdown-item');
    items[i].textContent = `${information[i].gender} ${information[i].age}`;
  }
};

const dropdownMenuButton = document.getElementById("dropdownMenuButton");
dropdownMenuButton.addEventListener("click", (event) => dropDownDisplay());