从 JavaScript 中的 JSON 数据填充下拉列表
Populate Dropdown from JSON Data in JavaScript
我正在尝试用我的 js 文件中的信息数据填充我的下拉菜单。每次我单击该按钮时,都会将 3 个对象添加到下拉列表中。我只希望这三个在我单击时显示。我也只是得到 [object object],没有实际价值。我错过了什么?
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 class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Info:
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#"></a></li>
</ul>
</div>
enter image description here
希望现在一切都好。对于未来 - 如果您传递对象,您需要指定您需要的 key/value 对(示例:information[i].gender)。否则会得到一个对象的引用[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 class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Info:
</button>
<ul class="dropdown-menu d-none" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">123</a></li>
<li><a class="dropdown-item" href="#">123</a></li>
<li><a class="dropdown-item" 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());
我正在尝试用我的 js 文件中的信息数据填充我的下拉菜单。每次我单击该按钮时,都会将 3 个对象添加到下拉列表中。我只希望这三个在我单击时显示。我也只是得到 [object object],没有实际价值。我错过了什么?
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 class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Info:
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#"></a></li>
</ul>
</div>
enter image description here
希望现在一切都好。对于未来 - 如果您传递对象,您需要指定您需要的 key/value 对(示例:information[i].gender)。否则会得到一个对象的引用[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 class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Info:
</button>
<ul class="dropdown-menu d-none" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">123</a></li>
<li><a class="dropdown-item" href="#">123</a></li>
<li><a class="dropdown-item" 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());