当被筛选的数组包含JSON数据时，为什么会得到未定义的“无法读取属性”filter？

Question

以下代码

const endpoint = 'https://raw.githubusercontent.com/Hipo/university-domains-list/master/world_universities_and_domains.json';
const universities = [];

fetch(endpoint)
    .then(results => results.json())

    .then(data => universities.push(...data));

console.log(universities);

function findMatches(wordToMatch, universities) {
    return universities.filter(uni => {
        const regex = new RegExp(wordToMatch, 'gi');
        return uni.name.match(regex)
    })
}

export default findMatches;

返回下面的错误

'未捕获的TypeError:无法读取未定义的'filter'属性'

我可以使用控制台记录数据。日志（大学）。那为什么我不能过滤掉呢？仅供参考数据是一个对象数组。非常感谢您的帮助。非常感谢。

Answer 1

我只是想让每个人都知道我终于成功了。我必须安装babel polyfill和babel preset env，并将其添加到网页包中，以使UglifyJS与async await一起工作，并优化捆绑包的大小。

出于某种原因，我不得不使用async await而不是常规的promise来将HTML呈现到DOM中，不知道为什么。无论如何，以下是最终按预期工作的代码：

UniFetch.js

const endpoint = 'https://raw.githubusercontent.com/Hipo/university-domains-list/master/world_universities_and_domains.json';

const universities = [];

const promise = fetch(endpoint)
    .then(blob => blob.json())
    .then(data => universities.push(...data.slice(8286, 8456)));

function findMatches(wordToMatch) {
    return promise.then(() => universities.filter(uni => {
        const regex = new RegExp(wordToMatch, 'gi');
        return uni.name.match(regex)
    }));
}

async function displayMatches() {
    searchResults.innerHTML = await findMatches(this.value)
        .then(arr => arr.map(uni => {
        return `
            <li>${uni.name}</li>
        `
    }));
}

const searchInput = document.querySelector("input[name='unisearch']");
const searchResults = document.querySelector('.unisearch__results');

searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);

export default findMatches

应用程序。js

import FindMatches from '../UniFetch.js'

FindMatches()

希望这能帮助一些人实现一个typeahead、自动完成API获取。

Answer 2

您需要删除大学作为findMatches函数中的参数，因为它覆盖了本地大学变量的值：

function findMatches(wordToMatch) {
    return universities.filter(uni => {
        const regex = new RegExp(wordToMatch, 'gi');
        return uni.name.match(regex)
    })
}

然后，您可以继续使用findMatches功能，如下所示：

findMatches("hi") // returns a filtered array

编辑：

您的代码中有一个竞争条件，其中findMatches可能在fetch完成之前被调用。要解决此问题，findMatches应返回如下promise：

const endpoint = 'https://raw.githubusercontent.com/Hipo/university-domains-list/master/world_universities_and_domains.json';
const universities = [];

const promise = fetch(endpoint)
    .then(results => results.json())

    .then(data => universities.push(...data));

console.log(universities);

function findMatches(wordToMatch) {
    return promise.then(() => universities.filter(uni => {
        const regex = new RegExp(wordToMatch, 'gi');
        return uni.name.match(regex)
    }));
}

findMatches("hi").then(arr => console.log(arr));