javascript - 未捕获的 TypeError：[Array].filter 不是函数

Question

我正在尝试将数据从烧瓶 api 传递到 chart.js。我们正在使用 D3 进行 api 调用：

var queryUrl = "http://127.0.0.1:5000/api/1/GenderOverTime";
var searchResults = [];

d3.json(queryUrl).then(function (chart_data) {
  searchResults = chart_data;});
  setTimeout(function(){init()},50)

这是我们遇到错误的部分：

function init(){
  console.log("searchResults: ", searchResults);
  let selector = d3.select("#selDataset");
  let options = []
  filtered_data_for_chart = searchResults.filter(result=>{
      if (!options.includes(result.Sport)){
          options.push(result.Sport)
          selector
          .append("option")
          .text(result.Sport)
          .property("value", result.Sport);
      }
      
      return result.Sport==="Gymnastics"
  });

运行后init()，我们得到“ChartJSfile.js:14 Uncaught TypeError: searchResults.filter is not a function”。

在使用 api 之前，我们有另一个 js 脚本，将完全相同的数据保存为数组对象，并且图表和过滤器工作正常。

我们添加了setTimeout以留出一些时间来获取数据，因为 init() 在数据加载到数组之前正在运行。

数据样本：

[{
    "_id": {
      "$oid": "61589a22cd5cc36ad5fc8898"
    },
    "Sport": "Aeronautics",
    "Year": 1936,
    "Sex": "M",
    "Name": 1,
    "Bronze": 0,
    "Silver": 0,
    "Gold": 1,
    "No Win": 0,
    "Attempts": 1,
    "Wins": 1
  },... ]

标签： javascriptd3.jschart.js

Answer 1

如您在此处看到的，您的代码似乎可以正常工作

您可能需要对其进行重构，以确保在需要时可以访问搜索结果中的数据：

var queryUrl = "http://127.0.0.1:5000/api/1/GenderOverTime";
var searchResults = [];

d3.json(queryUrl).then(function (chart_data) {
  searchResults = chart_data;
  init(searchResults);
});


function init(results) {
  console.log("searchResults: ", results);
  let selector = d3.select("#selDataset");
  let options = [];
  filtered_data_for_chart = results.filter((result) => {
    if (!options.includes(result.Sport)) {
      options.push(result.Sport);
      selector
        .append("option")
        .text(result.Sport)
        .property("value", result.Sport);
    }

    return result.Sport === "Gymnastics";
  });
}