连接天气 api 时出现数据错误答案

【问题标题】：error in data when i connect a weather api连接天气 api 时出现数据错误
【发布时间】：2021-07-07 04:30:34
【问题描述】：

这是我第一个使用 node.js 和 express 的应用程序。这是一个基本的应用程序，我连接到外部 API 以显示温度并获取用户输入的“邮政编码和感觉”并将其显示给 UI。我无法获取数据。

我运行应用程序并在邮政编码和感觉文本区域输入数据，我做错了什么？

server.js

// Setup empty JS object to act as endpoint for all routes
projectData = {};
const port = 3000
// Require Express to run server and routes
const express = require("express")
const bodyParser = require("body-parser")
const cors = require("cors")
// Start up an instance of app
const app = express();
/* Middleware*/
//Here we are configuring express to use body-parser as middle-ware.
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// Cors for cross origin allowance
app.use(cors())
// Initialize the main project folder
app.use(express.static('website'));
app.get('/getWeather',(req,res) => {
    res.send(projectData)
})
app.post('/addWeather',(req,res) => {
    newEntry = {
        data:req.body.data,
        temp: req.body.temp,
        content: req.body.content
    }
    projectData = newEntry;
    
})
// Setup Server
app.listen(port, () => {
    console.log(`Your server is running on port ${port}`);
})

网站/app.js

/* Global Variables */

//const { request } = require("express");

// Create a new date instance dynamically with JS
let d = new Date();
let newDate = (d.getMonth()+1) +'.'+ d.getDate()+'.'+ d.getFullYear();
//let zipcode = document.querySelector("#zip").value;
const APIkey = "2f12ba4132bf221863be475a1a6b34f6";
//let fullURL=`https://api.openweathermap.org/data/2.5/weather?zip=${zipcode}&appid=${APIkey}$units=metric`


const button1 = document.querySelector("#generate")
button1.addEventListener("click", getDataOfWeather)

function getDataOfWeather(){
    const feeling = document.querySelector("#feelings").value;
    const zipcode = document.querySelector("#zip").value;
        getTemp(zipcode)
        .then(function(temp){
             /* console.log(temp);
              addData('/addWeather',{ data: newDate , temp: temp, content: feeling});*/
             addData(temp,feeling)
        })
        .then(
            updateUI()
        )
     
}

const getTemp = async(zipcode) => {
    
    try {
        
        if(!zipcode){
            alert("you didnot enter zip code");
        }
        const fullURL=`https://api.openweathermap.org/data/2.5/weather?zip=${zipcode}&appid=${APIkey}&units=metric`
        const res = await fetch(fullURL)
        if(res.status === 200){
            const data = await res.json();
            console.log(data.main.temp);
            return data.main.temp;
            }
        else if(res.status === 404){
            alert("error in ZIP code ");
            return false;}
       /* const data = await res.json();
        return data;*/
    }
    catch (err)
    {
        console.log(err);
    }
}
const addData = async(temp,fell) => {
    console.log(fell);
   const response = await fetch("/addWeather",{
       method: "POST",
       credentials: "same-origin",
       body:{
           data : newDate,
           temp:temp,
           content: fell,
       }
   })
   try {
    const nData = await response.json();
    return nData;
}
catch(err)
{
          console.log(err);
}
   
}
/*const addData = async(url = '', data = {})=> {
    const response = await fetch (url , {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
    try {
        const nData = await response.json();
        return nData;
    }
    catch(err)
    {
              console.log(err);
    }
}*/
const updateUI = async() => {
    const request = await fetch('/getWeather');
    try {
        const allOfData = await request.json();
        console.log(allOfData);
        document.getElementById('data').innerHTML = allOfData.newDate;
        document.getElementById('temp').innerHTML = allOfData.temp;
        document.getElementById('content').innerHTML = allOfData.content;
        

    }
    catch (err)
    {
        console.log("error",err);
    }
}

网站/index.js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Weather Journal</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:400,600,700|Ranga:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
 <body>
<div id = "app">
  <div class ="holder headline">
    Weather Journal App
  </div>
  <div class ="holder zip">
    <label for="zip">Enter Zipcode here</label>
    <input type="text" id="zip" placeholder="enter zip code here">
  </div>
  <div class ="holder feel">
    <label for="feelings">How are you feeling today?</label>
    <textarea class= "myInput" id="feelings" placeholder="Enter your feelings here" rows="3" cols="30"></textarea>
    <button id="generate" type = "submit"> Generate </button>
  </div>
  <div class ="holder entry">
    <div class = "title">Most Recent Entry</div>
   <div id = "entryHolder">
    <div id = "date"></div> 
   <div id = "temp"></div>
   <div id = "content"></div>
  </div>
  </div>
  </div>
<script src="app.js" type="text/javascript"></script>

</body>
</html>

【问题讨论】：

所以你有一个错误但决定不实际说出错误信息是什么？为什么，这是秘密？当您将最重要的信息保密时，任何人都可能回答。
@JK 我认为图片说明了一切......控制台中存在错误，并且存在解决该问题所需的所有文件。

标签： javascript html node.js api express

【解决方案1】：

您的 ID 是 app.js 中更新 UI 功能中的日期而不是数据

const updateUI = async() => {
    const request = await fetch('/getWeather');
    try {
        const allOfData = await request.json();
        console.log(allOfData);
        document.getElementById('date').innerHTML = allOfData.newDate;  // change data to  date 
        document.getElementById('temp').innerHTML = allOfData.temp;
        document.getElementById('content').innerHTML = allOfData.content;
        

    }
    catch (err)
    {
        console.log("error",err);
    }
}

【讨论】：

当我这样做导致 Ui 未定义