为什么我的过滤后的数组结果(重新)不会在页面上呈现?

时间:2017-08-26 12:04:37

标签: javascript jquery

谁能告诉我哪里出错?

拼命试图让我的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并在那里看到它们。

但他们为什么不显示呢?

0 个答案:

没有答案