-1

This is the sample code:

// Use zipURL to receive long and lat by using zipcode
const userInfo = document.getElementById('userInfo');
const generate = document.getElementById('generate');

// Function to get the coords using the zipcode entered in the form
const getCoords = async (zipURL, zip, key) => {

    // res equals to the result of fetch function
    const res = await fetch(`${zipURL}?zip=${zip}&appid=${key}`);
    try {

        // data equals to the result of fetch function
        const coords = await res.json();
        return coords;
    }
    catch (error) {
        console.log("error", error);
    }
};

// Function to get the weather data using the lat and long
const getWeatherData = async (weatherURL, coords, key) => {
    const res = await fetch(`${weatherURL}?lat=${coords.lat}&long=${coords.long}&appid=${key}`);
    try {
        const data = await res.json();
        return data;
    }
    catch (error) {
        console.log("error", error);
    }
}

generate.addEventListener("click", (e) => {
    e.preventDefault();

    const zip = document.getElementById("zip").value;
    const feelings = document.getElementById("feelings").value;

    if (zip !== "") {
        generate.classList.remove("invalid");
        getCoords(zipURL, zip, key)
            .then(getWeatherData(weatherURL, coords, key))
    }
})

I want to receive the coords which are the longitude and latitude present in the promis object returned by the getCoords function. Then I want to use them in the getWeatherData function. But I can't seem to figure the small details. Please help me solve this as I have been banging my head against the wall for this to work!

Rohan Asif
  • 31
  • 1
  • 6
  • What's your current problem? – vicnoob Oct 17 '22 at 08:36
  • the browser throws an error "coords is not defined" and I can't seem to get why that's a problem! – Rohan Asif Oct 17 '22 at 08:37
  • 3
    You are *calling* `getWeatherData` , instead of **passing** the function to `then`. – trincot Oct 17 '22 at 08:38
  • I just want to use the return object of getCoords as that object contains the longitude and latitude so that I can use those values in getWeatherData – Rohan Asif Oct 17 '22 at 08:39
  • 2
    It needs to be `.then(coords => getWeatherData(weatherURL, coords, key))`, assuming `weatherURL` and `key` are defined in the surrounding scope – Nick Parsons Oct 17 '22 at 08:39
  • The closure reason points to a question about `setTimeout` callback, but the problem in your code is the same, albeit with `then` instead of `setTimeout` -- same mistake. – trincot Oct 17 '22 at 08:44

1 Answers1

1

Seems that instead of passing a callback to .then, your are passing a function execution instead. Try this (Im asumming that return data from getCoords() is object with property weatherURL, coords, key). Or using async await syntax instead of .then

generate.addEventListener("click", (e) => {
    e.preventDefault();

    const zip = document.getElementById("zip").value;
    const feelings = document.getElementById("feelings").value;

    if (zip !== "") {
        generate.classList.remove("invalid");
        getCoords(zipURL, zip, key)
            .then(({weatherURL, coords, key}) => getWeatherData(weatherURL, coords, key))
    }
})
vicnoob
  • 1,169
  • 13
  • 27
  • Seems like it solved one issue but a second one has arisen... now that I have the coords promise object... I can see in the browser that it has longitude and latitude properties.. but I want to use those in the getWeatherData promise function – Rohan Asif Oct 17 '22 at 08:45
  • https://dmitripavlutin.com/javascript-fetch-async-await/#2-fetching-json Think this article will help you a bit, it's only problem with the type of returned data from the `getCoords`, you can simply try `const res = await getCoords(zipUrl, zip, key)` and then console.log(res) to see the result – vicnoob Oct 17 '22 at 08:50