score:0

probably in the body of your search weather callback, the "${searchterm}" is undefined. so you set the "q" param as "undefined", that's why you got bad query.

i've checked that for me with test token and got that too (for empty terms). here's working & bad query

score:0

i figured out the problem, my post was not working for whatever reason so i combined the search term parameter from the input field into the get request and now my express proxy server communicates correctly to the openweatherapi, retrieves the results, then sends the results back to the client. i used route parameters, which you can read more about here.

reformated react code

const weathercontainer = () => {
    let [searchterm, setsearchterm] = usestate('')
    let [currentweather, setcurrentweather] = usestate({});
    let [forecastedweather, setforecastedweather] = usestate({});
    let [loading, setloading] = usestate(false); 
    
    const handleinput = (e) => {
        setsearchterm(e.target.value);
    }

    const handlesearch = () => {
        fetch(`/weather/${searchterm}`)
            .then(res => res.json())
            .then(data => {
                    console.log(data)
               })
    };
    

    return (
        <>
            <div classname='search-bar'>
                    <input classname='text_input' type='text' name='searchterm' onchange={handleinput} placeholder='enter city' />
                    <button classname='search-button' onclick={handlesearch} type='submit' value='submit' name='button'>
                        <icon icon={searchicon} flip="horizontal" />
                    </button>
            </div>
            
            <div classname='weather_container'>
                <currentweathercomponent />
                <forecastcontainer />
            </div>
        </>
    )

};

reformated express code

const express = require('express');
const port = 5000;
const fetch = require('node-fetch')
const app = express();
const weatherapikey = '***hidden***';
const cors = require('cors');

app.use(express.static("client"));
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// get current & forecast weather by search term
app.get('/weather/:searchterm', (req, res) => {
    console.log(req.params)
    const searchterm = req.params.searchterm;
    console.log(searchterm)
    
    let currenturl = `http://api.openweathermap.org/data/2.5/weather?q=${searchterm}&units=imperial&appid=${weatherapikey}`;
  
    fetch(currenturl)
        .then(res => res.json())
        .then(data => {
            res.send(data)
        })
        .catch(err => { 
            res.redirect('/error')
    });  
}); 


app.listen(port); 
console.log(`server is listening on ${port}`);

network request / console of data

server console showing the search query


Related Query

More Query from same tag