我拼命试图让我的jquery轮播重新渲染过滤数组的结果 - 但今天确实遇到了问题。
我用wrapper
从div中抓取carouselId
我得到api数组的对象&将它存储在moviesArray中。
然后关键是当有人输入输入时,它会根据新过滤的数组重新渲染轮播。
function populateCarousel() {
var moviesArray = [];
var tempResultsArr = [];
fetch('http://localhost:3000/getdata')
.then((res) => res.json())
.then((json) => {
moviesArray = json;
// ===== if NO searchTerm is entered ====
// THIS ONE WORKS
if (typeof searchTerm === 'undefined') {
moviesArray.map((each) => {
var eachTile = document.createElement("a");
var imageForEachTile = document.createElement("img");
imageForEachTile.setAttribute('src', each.poster);
eachTile.setAttribute("class", "carousel-item thumbnail-item");
eachTile.setAttribute("href", "#linkToSomeWhere");
eachTile.innerHTML = each.title;
eachTile.appendChild(imageForEachTile);
wrapper.appendChild(eachTile);
})
} else {
// ===== if a searchTerm *IS* entered ====
// THIS ONE DOESN'T WORK!
while (wrapper.firstChild) {
wrapper.removeChild(wrapper.firstChild);
}
function checkWords(searchTerm, arr) {
let st = searchTerm.toLowerCase();
return arr.filter(each => each.title.toLowerCase().indexOf(st) === 0);
}
let newArr = checkWords(searchTerm, moviesArray);
newArr.map((each) => {
var eachTile = document.createElement("a");
var imageForEachTile = document.createElement("img");
imageForEachTile.setAttribute('src', each.poster);
eachTile.setAttribute("class", "carousel-item thumbnail-item");
eachTile.setAttribute("href", "#linkToSomeWhere");
eachTile.innerHTML = each.title;
eachTile.appendChild(imageForEachTile);
wrapper.appendChild(eachTile);
})
// this logs out correctly & when i go into the html
// the correct searchresults are there, a and img tags.
// but they dont show.
console.log('wrapper: ', wrapper);
}
})
}
你注意到.map((每个)......在IF / ELSE的两边是相同的。
它确实正确地创建元素和属性,并且确实附加它们因为a)我可以将它们记录下来但是b)我实际上可以检查chrome中的HTMl并在那里看到它们。
但他们为什么不显示呢?