while using 'fetch()', i got the answer, "failed to feth"

Question

I would like to ask question related to fetching. I'm required to create a weather website. For this, firstly, I registered in weather api, got a key, and formulated my 'url' by following api doc. Now, the url itself seems works; 'https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=01d9f2d66b5fb9c863aa86b5cb001cd2', because the details are shown when paste in browser. The problem itself is that, when I use 'url' in my code with 'fetch', the api doesn't provide any info. the code is the following:

let weather = {
    fetchWeather : function() {
        fetch("https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=01d9f2d66b5fb9c863aa86b5cb001cd2")
        .then((response) => response.json())
        .then((data) => console.log(data));
    },
};

the result:

VM1176:3          GET https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=01d9f2d66b5fb9c863aa86b5cb001cd2 net::ERR_FAILED
fetchWeather @ VM1176:3
(anonymous) @ VM1217:1
VM1176:3          Uncaught (in promise) TypeError: Failed to fetch
    at Object.fetchWeather (<anonymous>:3:9)
    at <anonymous>:1:9

could you pls help me how to solve the problem?

I want to know why the problem occurs and how to solve it

[Under what circumstances may I add "urgent" or other similar phrases to my question, in order to obtain faster answers?](https://meta.stackoverflow.com/questions/326569/under-what-circumstances-may-i-add-urgent-or-other-similar-phrases-to-my-quest) — jabaa, Dec 03 '22 at 12:40

score 0 · Answer 1 · answered Dec 04 '22 at 18:34

Here is a working version.

I added a form so that you can pass city and unit type as parameters.

<!DOCTYPE html>
<html lang="en">
<head>
    <script>           
        function fetchWeather() {
            var city = document.getElementById('city').value;
            var metrics = document.getElementById('metrics').value;
        
            let weather =  fetch(
            "https://api.openweathermap.org/data/2.5/weather?"
                + new URLSearchParams(
                    {
                        q: city,
                        units: metrics,
                        appid: '01d9f2d66b5fb9c863aa86b5cb001cd2'
                    }
                )
            )
            .then(response => response.json())
            .then(jsonObj => JSON.stringify(jsonObj))
            .then(data => console.log(data));
        }
    </script>
</head>

<body>
    <section>
        <form action="javascript:fetchWeather();">
            <input type="text" id="city" name="city"><br>
            <input type="radio" id="metrics" name="unitType" value="metrics" checked="checked">
            <label for="metrics">Metrics</label><br>
            <input type="radio" id="imperial" name="unitType" value="imperial">
            <label for="imperial">Imperial</label><br>
            <input type="submit" value="Submit">
        </form>
    </section>
</body>
</html>

while using 'fetch()', i got the answer, "failed to feth"

1 Answers1