Flask应用实现搜索栏时JS的filter和map报TypeError如何解决

你碰到的filter/map报错是因为调用这两个方法的cities变量不是数组，而是单个对象，或者结构不符合预期。具体问题和解决方案如下： #

具体问题 #

• API地址未动态更新：你在loadCities里修改了currentType = "search.json"，但apiUrl是页面初始化时就拼接完成的常量，仍然指向最初的current.json接口，返回的是单个城市的天气对象，不是数组，赋值给cities后自然没有数组的filter、map方法。
• 接口返回结构不匹配：weatherapi的search.json搜索接口返回的数组元素，字段直接是name/region/country，没有嵌套location、current字段，你在displayCities里写的city.location.name、city.current.temp_c不存在，后续也会报错。
• 搜索逻辑错位：你现在的逻辑是页面加载时就加载固定城市的结果，没有跟着用户输入的关键词去调用搜索接口，无法实现动态搜索匹配城市的功能。

修正后代码 #

let currentType = "current.json";
let userCity = "London";
const apiBaseData = {
    url: "http://api.weatherapi.com/v1",
    key: "40cd513af8aa446484a92837213011",
};

// 初始加载默认城市天气
fetchWeather(userCity);

const generateHtml = (data) => {
    const html = `
     <div class="weather-location">
        <h1>${data.location.name}, ${data.location.country}</h1></div>
     <div class="details">
         <span>温度: ${data.current.temp_c} °C</span>
         <span>体感温度: ${data.current.feelslike_c} °C</span>
     </div>
 `;
    const weatherDiv = document.querySelector(".weather");
    weatherDiv.innerHTML = html;
};

/* SEARCH BAR */
const citiesList = document.getElementById('weather-cities');
const searchBar = document.getElementById('weather-searchbar');
let cities = [];

// 输入时触发搜索
searchBar.addEventListener('keyup', async (e) => {
    const searchKeyword = e.target.value.trim();
    // 搜索词为空时清空列表
    if (!searchKeyword) {
        citiesList.innerHTML = '';
        return;
    }
    try {
        // 动态拼接搜索接口地址
        const searchUrl = `${apiBaseData.url}/search.json?key=${apiBaseData.key}&q=${searchKeyword}`;
        const res = await fetch(searchUrl);
        if (!res.ok) throw new Error('搜索请求失败');
        cities = await res.json();
        displayCities(cities);
    } catch (err) {
        console.error(err);
    }
});

const displayCities = (cities) => {
    let htmlString = cities
        .map((city) => {
            return `
            <li class="character" data-city="${city.name},${city.country}">
                <h2>${city.name}, ${city.region}, ${city.country}</h2>
            </li>
        `;
        })
        .join('');
    citiesList.innerHTML = htmlString;
    // 点击搜索结果切换城市天气
    document.querySelectorAll('.character').forEach(item => {
        item.addEventListener('click', () => {
            const selectedCity = item.dataset.city;
            fetchWeather(selectedCity);
            searchBar.value = '';
            citiesList.innerHTML = '';
        })
    })
};

// 封装获取天气的公共方法
async function fetchWeather(city) {
    try {
        const weatherUrl = `${apiBaseData.url}/current.json?key=${apiBaseData.key}&q=${city}`;
        const res = await fetch(weatherUrl);
        if (!res.ok) throw new Error('天气请求失败');
        const data = await res.json();
        generateHtml(data);
    } catch (err) {
        console.error(err);
    }
}

修正说明 #

• 拆分了天气查询和城市搜索的接口请求逻辑，接口地址按需动态拼接
• 匹配了search.json接口的返回结构，新增了点击搜索结果切换对应城市天气的逻辑
• 兼容了搜索词为空的边界场景

内容的提问来源于stack exchange，提问作者Suiryu