对接OpenWeatherMap更新UI时报Cannot read 'temp' of undefined错误如何解决

• 报错的直接原因是你在updateUI函数中尝试读取allData[0].temp时，allData[0]为undefined
• 核心逻辑问题：服务端/all接口返回的是projectData对象，而不是你预期的数组。从你给出的服务端代码可以看到，你把数据存在了projectData的entry属性中，接口实际返回的结构是{ entry: [/* 所有数据条目 */] }，对象本身没有[0]这个索引，所以取值为undefined。

你可以在updateUI的const allData = await request.json();后加一行console.log(allData)，控制台打印的结果会直接验证上面的结论。

方案1：修改客户端代码（改动最小） #

直接从返回对象的entry属性中取数组，同时增加空值判断避免数组为空时触发报错：

const updateUI = async () => {
  const request = await fetch('/all');
  try {
    const allData = await request.json();
    // 先判断数组存在且有数据再取值
    if (allData?.entry?.length) {
      // 注意：如果要取最新提交的条目，应该用 allData.entry.at(-1) 而非 [0]
      const latestEntry = allData.entry[0];
      document.getElementById('temp').innerHTML = `Current temperature: ${latestEntry.temp} degree celsius`;
      document.getElementById('date').innerHTML = `Today's date: ${latestEntry.date} `;
      document.getElementById('content').innerHTML = `I feel: ${latestEntry.content}`;
    }
  } catch (error) {
    console.log("error", error);
  }
}

方案2：修改服务端代码 #

如果你希望保持现有客户端逻辑不变，直接修改/all接口的返回值，直接返回数组即可：

// 找到你服务端定义的 /all 接口，把返回逻辑改成下面这样
app.get('/all', function(request, response) {
  response.send(projectData.entry);
});

你当前用push方法往数组里加数据，所以最早提交的第一条数据存在索引0的位置，最新提交的数据在数组最后一位。如果要展示最新提交的内容，把索引改成allData.entry.length - 1或者用allData.entry.at(-1)即可。

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