Question

我有一个具有以下结构的json文件：

{"year" : 1990, "fact": "Er waren oorspronkelijk maar drie seizoenen van de serie voorzien"}

在我的网站上，有电影片段。他们都有发布日期。如果发布日期与JSON文件中的特定年份匹配，那么我想显示属于该年份的事实。我尝试使用以下代码来做到这一点：

const showFact = async () => {
        const year = document.querySelector(`.date`).textContent.split(` `)[2];
        const response = await fetch(`./assets/data/nice-to-know.json`);
        const facts = response.json();
        const fact = facts.filter(fact => fact.year == year).fact;
        document.querySelector(`.fact`).textContent = fact;
      }

如果我console.log(fact)，我发现事实是undefined

Answer 1

Array.prototype.filter仍然返回一个数组，您正在寻找的是Array.protoype.find

const facts = [
  {"year" : 1990, "fact": "1990 fact"},
  {"year" : 1991, "fact": "1991 fact"},
  {"year" : 1992, "fact": "1992 fact"},
  {"year" : 1993, "fact": "1993 fact"}
]
const fact = facts.find(fact => fact.year === 1990).fact;
console.log(fact);

Answer 2

正如我在评论中所说，您的问题在于

const fact = facts.filter(fact => fact.year == year).fact;

因为filter返回一个数组，该数组当然没有fact属性。

假设filter返回一个非空的单元素数组，这可能是您的意思。

const fact = facts.filter(fact => fact.year == year)[0].fact;

Answer 3

const showFact = async () => {
    const year = document.querySelector(`.date`).textContent.split(` `)[2];
    const response = await fetch(`./assets/data/nice-to-know.json`);
    const facts = await response.json();
    const fact = facts.filter(fact => fact.year == year)[0].fact;
    document.querySelector(`.fact`).textContent = fact;
  }

array.filter返回一个数组。我只需要选择该数组的第一项。

Answer 4

正如Federico在注释中指出的那样，您正在尝试访问数组上的属性。当您过滤facts时，它变成一个数组，您需要对其进行映射。

const showFact = async () => {
        const year = document.querySelector(`.date`).textContent.split(` `)[2];
        const response = await fetch(`./assets/data/nice-to-know.json`);
        const facts = response.json();
        const factList = facts.filter(fact => fact.year == year).map(fact => fact.fact);
        document.querySelector(`.fact`).textContent = factList.join("<br>");
      }

以上，我使用map函数将事实提取到只有事实的数组中（没有年份），然后换行。

array.filter给出一个未定义的值

4 个答案: