时间戳

首页 > 解决方案 > Uncaught (in promise) TypeError: states.filter is not a function at searchStates

javascript - Uncaught (in promise) TypeError: states.filter is not a function at searchStates

问题描述

[
    {
        "abbr": "AL",
        "name": "Alabama",
        "web": "www.google.com",
        "capital": "Montgomery",
        "lat": "32.361538",
        "long": "-86.279118"
    },
    {
        "abbr": "AK",
        "name": "Alaska",
        "capital": "Juneau",
        "lat": "58.301935",
        "long": "-134.419740"
    },
    {
        "abbr": "AZ",
        "name": "Arizona",
        "capital": "Phoenix",
        "lat": "33.448457",
        "long": "-112.073844"
    },
    {
        "abbr": "AR",
        "name": "Arkansas",
        "capital": "Little Rock",
        "lat": "34.736009",
        "long": "-92.331122"
    },
    {
        "abbr": "CA",
        "name": "California",
        "capital": "Sacramento",
        "lat": "38.555605",
        "long": "-121.468926"
    },
    {
        "abbr": "CO",
        "name": "Colorado",
        "capital": "Denver",
        "lat": "39.7391667",
        "long": "-104.984167"
    },
    {
        "abbr": "CT",
        "name": "Connecticut",
        "capital": "Hartford",
        "lat": "41.767",
        "long": "-72.677"
    },
    {
        "abbr": "DE",
        "name": "Delaware",
        "capital": "Dover",
        "lat": "39.161921",
        "long": "-75.526755"
    },
    {
        "abbr": "FL",
        "name": "Florida",
        "capital": "Tallahassee",
        "lat": "30.4518",
        "long": "-84.27277"
    },
    {
        "abbr": "GA",
        "name": "Georgia",
        "capital": "Atlanta",
        "lat": "33.76",
        "long": "-84.39"
    },
    {
        "abbr": "HI",
        "name": "Hawaii",
        "capital": "Honolulu",
        "lat": "21.30895",
        "long": "-157.826182"
    },
    {
        "abbr": "ID",
        "name": "Idaho",
        "capital": "Boise",
        "lat": "43.613739",
        "long": "-116.237651"
    },
    {
        "abbr": "IL",
        "name": "Illinois",
        "capital": "Springfield",
        "lat": "39.783250",
        "long": "-89.650373"
    },
    {
        "abbr": "IN",
        "name": "Indiana",
        "capital": "Indianapolis",
        "lat": "39.790942",
        "long": "-86.147685"
    },
    {
        "abbr": "IA",
        "name": "Iowa",
        "capital": "Des Moines",
        "lat": "41.590939",
        "long": "-93.620866"
    },
    {
        "abbr": "KS",
        "name": "Kansas",
        "capital": "Topeka",
        "lat": "39.04",
        "long": "-95.69"
    },
    {
        "abbr": "KY",
        "name": "Kentucky",
        "capital": "Frankfort",
        "lat": "38.197274",
        "long": "-84.86311"
    },
    {
        "abbr": "LA",
        "name": "Louisiana",
        "capital": "Baton Rouge",
        "lat": "30.45809",
        "long": "-91.140229"
    }
]

我有以下代码，当我从本地存储中获取数据（我在上面的本地存储库中导出 .json 文件）时，正如您在下面代码的注释部分中看到的那样，它可以正常工作。当我尝试从外部 url 获取数据时，出现“TypeError：states.filter 不是 searchStates 的函数”错误。如何从外部 url 获取我的数据？（从外部 url，我可以读取 .json 文件，并且可以使用“console.log”查看其内容，但在尝试过滤时出现此错误）

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');

const searchStates = async searchText =>{
    

    let url = 'https://v1.nocodeapi.com/emrescksn/webflow/WAOOrnxdScaWCRlT';
    let res= await fetch(url);
    //let res= await fetch('../json/states.json');
    let states= await res.json();


    let matches=states.filter(state => {
        const regex = new RegExp(`^${searchText}`,`gi`);
        return state.name.match(regex) || state.abbr.match(regex);
    });

    if(searchText.length === 0){
        matches=[];
        matchList.innerHTML='';
    }

    outputHtml(matches);    
};

const outputHtml = matches => {
    if(matches.length > 0) {
        const html=matches.map(match => `
            <div class="card card-body mb-1">
            <h4>${match.name} (${match.abbr}) <a href="https://${match.web}/">Visit W3Schools.com!</a></h4>
            </div>

        `).join('');

        matchList.innerHTML = html;
    }


}


search.addEventListener('input', () => searchStates(search.value));

标签： javascriptjson

解决方案

您问题的预期 JSON 结果与 API 中的 JSON 不同！

您可以使用states.items.filter代替，states.filter但链接的 API 没有属性abbr，因此它将返回undefined：

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');

const searchStates = async searchText => {


  let url = 'https://v1.nocodeapi.com/emrescksn/webflow/WAOOrnxdScaWCRlT';
  let res = await fetch(url);
  //let res= await fetch('../json/states.json');
  let states = await res.json();

  let matches = states.items.filter(state => {
    const regex = new RegExp(`^${searchText}`, `gi`);
    return state.name.match(regex);
  });

  if (searchText.length === 0) {
    matches = [];
    matchList.innerHTML = '';
  }

  outputHtml(matches);
};

const outputHtml = matches => {
  if (matches.length > 0) {
    const html = matches.map(match => `
            <div class="card card-body mb-1">
            <h4>${match.name} (${match.abbr}) <a href="https://${match.web}/">Visit W3Schools.com!</a></h4>
            </div>

        `).join('');

    matchList.innerHTML = html;
  }


}


search.addEventListener('input', () => searchStates(search.value));
<input type="text" id="search">
<div id="match-list"></div>

推荐阅读