JavaScript Array.filter() 和 .map() 不起作用，搜索功能未捕获 TypeError答案

【问题标题】：JavaScript Array.filter() and .map() don't work, uncaught TypeError for Search functionJavaScript Array.filter() 和 .map() 不起作用，搜索功能未捕获 TypeError
【发布时间】：2022-01-08 21:26:52
【问题描述】：

所以我试图在我的 Flask 应用程序中实现一个搜索栏，它将列出用户输入的城市，并且存在于天气 API 的 JSON API 结果中。

我正在关注一个教程，并且基本上与 ths 具有相同的代码：https://codepen.io/jamesqquick/pen/XWJxBQv

但是，在我的实现中，.filter() 和 .map() 函数不起作用，我收到以下错误： TypeError for map() and filter()

我该如何解决这个问题？

这是我的代码（代码第一部分中的常规 generateHTML 已经可以获取当前天气数据，只有“搜索栏”部分有问题）：

let currentType = "current.json";
let userCity = "London";

const apiData = {
    url: "http://api.weatherapi.com/v1",
    type: `${currentType}`,
    key: "40cd513af8aa446484a92837213011",
    city: `${userCity}`,
  };


const { url, type, key, city } = apiData;

const apiUrl = `${url}/${type}?key=${key}&q=${city}`;

console.log("apiUrl:");
console.log(apiUrl);

 fetch(apiUrl)
   .then((data) => {
     if (data.ok) {
       return data.json();
     }
     throw new Error("Response not ok.");
   })
   .then((locationRequest) => generateHtml(locationRequest))
   .catch((error) => console.error("Error:", error));

 const generateHtml = (data) => {
   console.log("data:")
   console.log(data);
   console.log("data.location.name:")
   console.log(`${data.location.name}`);
   const html = `
     <div class="weather-location">
        <h1>${data.location.name}, ${data.location.country}</h1></div>
     <div class="details">
         <span>Tmp: ${data.current.temp_c} °C</span>
         <span>Feels like: ${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 = [];

console.log("citiesList:");
console.log(citiesList);
console.log("searchBar:");
console.log(searchBar);

searchBar.addEventListener('keyup', (e) => {
    userCity = e.target.value.toLowerCase();
    console.log("usercity:");
    console.log(userCity);
    const filteredCities = cities.filter((city) => {
        return (
            city.name.toLowerCase().includes(userCity) ||
            city.region.toLowerCase().includes(userCity) ||
            city.country.toLowerCase().includes(userCity)
        );
    });
    displayCities(filteredCities);
});

const loadCities = async () => {
    try {
        currentType = "search.json";
        const res = await fetch(apiUrl);
        cities = await res.json();
        console.log("cities:");
        console.log(cities);
        displayCities(cities);
    } catch (err) {
        console.error(err);
    }
};

const displayCities = (cities) => {
    let htmlString = cities
        .map((city) => {
            return `
            <li class="character">
                <h2>${city.location.name}</h2>
                <p>Temperature: ${city.current.temp_c} °C</p>
                <p>Feels like:${city.current.feelslike_c} °C></p>
            </li>
        `;
        })
        .join('');
    citiesList.innerHTML = htmlString;
};

loadCities();

<div class="other-stats">
    <div class="weather-search">
      <input type="text" id="weather-searchbar" placeholder="Your city"></input>
      <ul id="weather-cities"></ul>
    </div>
    <div class="weather"></div>
  </div>
  <script src="../static/weather_api.js"></script>

【问题讨论】：

console.log(cities); 记录什么？看起来它可能是一个对象而不是一个数组。
错误是说cities不是一个数组。确保它不是 undefined 或 null 或看起来像数组但不是数组的东西（例如节点列表）
@pilchard 它给了我API调用的所有信息，即JSON格式的API的天气数据
@slebetman 嗯，所以城市首先是一个空数组，所以可能就是这样，但我只在文件末尾调用函数 loadCities，并且当该函数运行时，根据控制台。日志，“城市”已经是我根据 API 获得的 JSON 文件编辑：虽然 addEventlListener 在函数运行之前已经存在，这是一个问题吗？从技术上讲，只有当有“keyup”时才会发生某事
空数组应该可以工作。空数组不是产生错误的原因。 JSON 文件正在生成错误。我看不到哪个日志是cities，但我在日志屏幕截图中看不到任何数组。我看到一个字符串“London”和几个Objects。我没有看到任何 Array

标签： javascript json api filter typeerror

【解决方案1】：

Array.prototype.filter() 和 Array.prototype.map() 用于数组，city 属性是获取一个 javascript 对象。您需要为“城市”分配一个数组。

【讨论】：

【解决方案2】：

好的，看来我现在解决了这个问题。在 displayCities 中，对于 HTML 部分，我将 city.location.name 放在“current.json”API 调用中获取名称，但在新的 API 调用“search.json”中，我得到一个包含不同字典的数组直接信息，而不是“位置”或“当前”等不同类别。所以city.name 就足够了。为了更好地澄清，请参阅 console.log 条目：

API call "current.json"

API call "search.json"

const displayCities = (cities) => {
    let htmlString = cities
        .map((city) => {
            return `
            <li class="character">
                <p>${city.name}</p>
            </li>
        `;
        })
        .join('');
    citiesList.innerHTML = htmlString;
};

【讨论】：