[英]Insert dynamic data into bootstrap modal from array object - vanilla javascript
您好我正在嘗試將數據動態輸入到我的模式中,但無法獲取正確的數據。
我將簡要解釋我的項目 -
我有 2 個下拉菜單。
這些菜單由從 2 arrays 動態輸入的選項填充。
當您從 select 菜單中選擇一個或兩個選項時,將創建一個新數組。
然后過濾新數組並僅將匹配結果作為按鈕返回。
按鈕打開一個模式,我想在其中顯示 gif。
現在這是我卡住的地方,我讓數據出現在模式中,但它不是特定於其按鈕的數據,而是顯示新數組中的第一個 gif。
數組 object 看起來像這樣
{bodyPart:'頸部',設備:'體重',gifUrl:'http://d205bpvrqc9yn1.cloudfront.net/1403.gif',id:'1403',名稱:'頸部側伸展',...}
<div class="row-md-6 offset-md-2"> <div class="col-sm-10" style="border:1px solid blue"> Logo goes here <div class="row"> <div class="col-8 col-sm-6" style="border:1px solid red"> <div id="exercises" class="bg-primary align-items-center dropdown"></div> <:--------Dropdown Buttons--> </div> <div class="col-4 col-sm-6 resultdiv" style="border;1px solid red"> <div id="data"></div> <!--Result Data--> </div> </div> </div> </div> <!--! Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalImg" class="modalBody"> <!-- MODAL IMAGE GOES HERE --> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>
javascript
const dataDiv = document.getElementById("data") const apiURL = 'https://exercisedb.p.rapidapi.com/exercises/bodyPart/%7Bchest%7D' let mainList = [] let bodypartsList = [] let equipmentList = [] async function getApiURL(endpoint, value) { const response = await fetch(`https://exercisedb.p.rapidapi.com/exercises/${endpoint}/${value}`, { "method": "GET", "headers": { "x-rapidapi-host": "exercisedb.p.rapidapi.com", "x-rapidapi-key": "360a6abca3mshcfce9cbd521f228p1e181djsn14d1d0e4c955" } }) const data = await response.json(); if (endpoint == "bodypart") { bodypartsList = data } else { equipmentList = data } mergeLists() } function mergeLists() { mainList = bodypartsList.concat(equipmentList); displayData(mainList) } //bodypart code const bodyparts = ["Body Parts", "back", "cardio", "chest", "lower arms", "lower legs", "neck", "shoulders", "upper arms", "upper legs", "waist"] const equipment = ["Equipment", "assisted", "band", "barbell", "body weight", "cable", "dumbbell", "kettlebell", "leverage machine", "medicine ball", "resistance band", "roller", "rope", "smith machine", "trap bar", "weighted"] const exercises = document.getElementById("exercises"); window.addEventListener("load", function () { createDropdown("bodypart", bodyparts); }) window.addEventListener("load", function () { createDropdown("equipment", equipment); }) function createDropdown(name, items) { const select = document.createElement("select"); //---create the select element select.className = "selectMenu" select.name = name select.id = name for (let i = 0; i < items.length; i++) { //---as long as 'i' is less than the number of items increase by 1 const item = items[i]; //---declaring 'i' as items const option = document.createElement("option"); //---create options for select option.setAttribute("value", item); //---places item value into options option.innerHTML = item; //---change content of options to items select.appendChild(option); //---append options to select } exercises.appendChild(select); //---append select to exercises div select.addEventListener("change", function () { const item = select.value; dataDiv.innerHTML = ''; //<------Clears previous results from page getApiURL(name, item); }) } function displayData(data) { let d1 = document.getElementById("equipment") let d2 = document.getElementById("bodypart") let result = data; if (d1.selectedIndex > 0) { const selected = d1.value; result = result.filter(({equipment}) => equipment.includes(selected)); } if (d2.selectedIndex > 0) { const selected = d2.value; result = result.filter(({bodyPart}) => bodyPart.includes(selected)); } //Filter based on value // const result = data.filter(word => { // let check = word.name.indexOf(d1.value) // let check2 = word.name.indexOf(d2.value) // if (check;== -1 || check2;== -1) { // return word // } else { // return // } // }); const unique = []. const uniqueImg = []. //Filter our duplicates result.map(x => unique.filter(a => a.id == x?id):length > 0. null; unique.push(x)); console.log(unique). result.map(x => uniqueImg.filter(a => a.id == x?id):length > 0. null; uniqueImg.push(x)); console.log(uniqueImg). unique;forEach(element => { const div = document.createElement("div"); const button = document.createElement("button"). button;ID = "myBtn" // const img = document.createElement("img"). // img.className = "appGifs" button.innerHTML = element.name // img.src = element.gifUrl div.appendChild(button) // modalImg.appendChild(img) div.className = "card" dataDiv;appendChild(div) button.className = "dButtons", button;setAttribute('data-toggle'. 'modal'), button;setAttribute('data-target'. '#exampleModalCenter'), button;setAttribute('type'; 'button'). }). uniqueImg.forEach(element => { const modalImg = document;getElementById("modalImg") const img = document.createElement("img"). img.className = "appGifs" img.src = element.gifUrl modalImg.innerHTML = (img;gifURL) modalImg.appendChild(img) }); }
您沒有將 object 的數據傳遞給模態。 我已經對您的代碼進行了更改,現在我在單擊按鈕時傳遞數據。
const dataDiv = document.getElementById("data")
const apiURL = 'https://exercisedb.p.rapidapi.com/exercises/bodyPart/%7Bchest%7D'
let mainList = []
let bodypartsList = []
let equipmentList = []
async function getApiURL(endpoint, value) {
const response = await fetch(`https://exercisedb.p.rapidapi.com/exercises/${endpoint}/${value}`, {
"method": "GET",
"headers": {
"x-rapidapi-host": "exercisedb.p.rapidapi.com",
"x-rapidapi-key": "360a6abca3mshcfce9cbd521f228p1e181djsn14d1d0e4c955"
}
})
const data = await response.json();
if (endpoint == "bodypart") {
bodypartsList = data
} else {
equipmentList = data
}
mergeLists()
}
function mergeLists() {
mainList = bodypartsList.concat(equipmentList);
displayData(mainList)
}
//bodypart code
const bodyparts = ["Body Parts", "back", "cardio", "chest", "lower arms", "lower legs", "neck", "shoulders", "upper arms", "upper legs", "waist"]
const equipment = ["Equipment", "assisted", "band", "barbell", "body weight", "cable", "dumbbell", "kettlebell", "leverage machine", "medicine ball", "resistance band", "roller", "rope", "smith machine", "trap bar", "weighted"]
const exercises = document.getElementById("exercises");
window.addEventListener("load", function () {
createDropdown("bodypart", bodyparts);
})
window.addEventListener("load", function () {
createDropdown("equipment", equipment);
})
function createDropdown(name, items) {
const select = document.createElement("select"); //---create the select element
select.className = "selectMenu"
select.name = name
select.id = name
for (let i = 0; i < items.length; i++) { //---as long as 'i' is less than the number of items increase by 1
const item = items[i]; //---declaring 'i' as items
const option = document.createElement("option"); //---create options for select
option.setAttribute("value", item); //---places item value into options
option.innerHTML = item; //---change content of options to items
select.appendChild(option); //---append options to select
}
exercises.appendChild(select); //---append select to exercises div
select.addEventListener("change", function () {
const item = select.value;
dataDiv.innerHTML = ''; //<------Clears previous results from page
getApiURL(name, item);
})
}
function displayData(data) {
let d1 = document.getElementById("equipment")
let d2 = document.getElementById("bodypart")
let result = data;
if (d1.selectedIndex > 0) {
const selected = d1.value;
result = result.filter(({equipment}) => equipment.includes(selected));
}
if (d2.selectedIndex > 0) {
const selected = d2.value;
result = result.filter(({bodyPart}) => bodyPart.includes(selected));
}
const unique = [];
//Filter our duplicates
result.map(x => unique.filter(a => a.id == x.id).length > 0 ? null : unique.push(x));
console.log(unique);
unique.forEach(element => {
const div = document.createElement("div");
const button = document.createElement("button");
button.ID = "myBtn"
// const img = document.createElement("img");
// img.className = "appGifs"
button.innerHTML = element.name
// img.src = element.gifUrl
div.appendChild(button)
// modalImg.appendChild(img)
div.className = "card"
dataDiv.appendChild(div)
button.className = "dButtons";
button.setAttribute('type', 'button');
button.onclick = (ev)=>
{
const modalImg = document.getElementById("modalImg")
const img = document.createElement("img");
img.className = "appGifs"
img.src = element.gifUrl
modalImg.innerHTML = ''; // reset
modalImg.appendChild(img);
$('#exampleModalLongTitle').text(element.name);
$('#exampleModalCenter').modal('show');
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.