这段正在工作的代码怎么可能现在被忽略了？答案

【问题标题】：How is it possible that piece of code that was working is now ignored?这段正在工作的代码怎么可能现在被忽略了？
【发布时间】：2020-09-17 18:32:19
【问题描述】：

我在 10 个月前编写了一个基于 ajax 的“JS TABS”，其中包含 .JSON 文件，现在想重用它，但不知道为什么它不起作用。从那以后我就没有碰过它，也不知道错误在哪里。

当我单击按钮渲染产品时，什么都不会打印出来 - 除了控制台告诉我：items is undefined = 所以我把它移到了function changeCategoryItems(categoryId) { } 里面，没有错误，但没有任何渲染......有人可以帮我吗？

这是我的意思的代码笔参考：https://codepen.io/Contemplator191/pen/WNwgypY 这是 JSON：https://api.jsonbin.io/b/5f634e0c302a837e95680846

如果 codepen 不适合/不允许，这里是整个 JS

let items = [];
const buttons = document.querySelectorAll('button');
const wrapper = document.querySelector('section.products');

buttons.forEach(function (button) {
  button.addEventListener('click',event => {
    changeCategoryItems(event.target.dataset.category);
  });
});


function changeCategoryItems(categoryId) {
    let items = [];
    const buttons = document.querySelectorAll('button');
    const wrapper = document.querySelector('section.products');
    const viewItems = (categoryId == 0 ) ? items : items.filter(item => item.category == categoryId);
    wrapper.innerHTML = "";
    viewItems.forEach(item => {
      const div = document.createElement('div');
      div.setAttribute("class", "product");
      div.innerHTML = createItem(item);
      wrapper.appendChild(div);
    });
};


function createItem(item) {
  return `

  <div class="product__img">
    <img src="${item.img}" class="">
  </div>

  <div class="product__name _tc">
    <h4 class="">${item.heading}</h4>
  </div>

  <div class="text-desc product__desc">
    <p class="">${item.description}</p>
  </div>


  <div class="product__bottom-content">
    <span class="product__info">${item.info}</span>
    <a href="" role="button" class="btn btn--teal btn--animated product__btn">${item.btn}</a>
  </div>

  `
}


fetch('https://api.jsonbin.io/b/5f634e0c302a837e95680846')
.then(function (res) { return res.json() })
.then(function (data) {
  items = data.items;
  changeCategoryItems(1);
});`

【问题讨论】：

标签： javascript json tabs

【解决方案1】：

在您的 fetch 中，您尝试将 data.items 分配给 items 变量，但 api 不返回带有 items 节点的数据，因此未定义 items。自从您上次使用它以来，该 api 可能更改了它们的返回格式，这可以解释为什么它以前可以工作。

这似乎解决了它

.then(function (data) {
  items = data;
  changeCategoryItems(1);
});

【讨论】：

非常感谢 :) 虽然我不明白第一句话，但我首先通过 myjson.com api 获得了它 - 好吧它不复存在或移动了...... - 这就是它改变的原因它的返回格式？

【解决方案2】：

您的问题在这一行：

items = data.items;

现在，返回值是一个数组，因此您可以按原样使用它。

更新后的codepen

【讨论】：

谢谢 :) 所以之前它是带有方法项的对象“数据”，但现在它怎么可能作为数组工作？