我的 HTML：
<body>
<form name="slectMovie">
IMDb rating:
<button type="submit" value="Select">Select</button>
</form>
<script src="script.js"></script>
</body>
我的 JS：
const getData = async () => {
try {
const res = await fetch("http://134.209.87.8:1337/api/movies");
const data = await res.json();
console.log(data);
const imdbSelect = document.createElement("select");
document.querySelector("form").append(imdbSelect);
if (data.data.length > 0) {
const IMDbRating = [
...new Set(data.data.map((x) => x.attributes.IMDbRating)),
];
IMDbRating.forEach((category) => {
const option = document.createElement("option");
option.textContent = category;
imdbSelect.append(option);
});
}
} catch (err) {
console.log(err);
}
};
getData();
我有一個選擇，即電影評級，我從創建的 API 中獲取，并從 API 添加選項值。
我想知道如何在表單下方顯示僅在選擇標簽中選擇的專案。
例如，如果我選擇第一個選項，我想在表單下方顯示僅匹配該條件的專案，如果我選擇其他選項以僅顯示具有該選項條件的專案。
uj5u.com熱心網友回復：
有很多方法可以實作這一目標。下面是其中之一。
在 html 中，添加新行以顯示專案。
<form name="slectMovie">
IMDb rating:
<button type="submit" value="Select">Select</button>
</form>
<ul id="theList"></ul>
<script src="script.js"></script>
在 javascript 中添加幾行顯示功能
let data = [];
function dispplayData({ target }) {
const selectedItem = data.data.filter(
(d) => d.attributes.IMDbRating === Number(target.value)
);
const displayList = document.querySelector("#theList");
displayList.innerHTML = "";
selectedItem.forEach((item) => {
let listItem = document.createElement("li");
listItem.textContent = item.attributes.title;
displayList.appendChild(listItem);
});
console.log(selectedItem);
}
const getData = async () => {
try {
const res = await fetch("http://134.209.87.8:1337/api/movies");
data = await res.json();
console.log(data);
const imdbSelect = document.createElement("select");
document.querySelector("form").append(imdbSelect);
imdbSelect.addEventListener("change", dispplayData);
if (data.data.length > 0) {
const IMDbRating = [
...new Set(data.data.map((x) => x.attributes.IMDbRating)),
];
IMDbRating.forEach((category) => {
const option = document.createElement("option");
option.textContent = category;
imdbSelect.append(option);
});
}
} catch (err) {
console.log(err);
}
};
getData();
希望這對您有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/455301.html
標籤：javascript 形式 api 拿来 比较