Cannot get data (temprature) from API

Question

0.00/5 (No votes)

See more:

I use openweathermap to get some data (temperature) by letting user enter the Zip Code of his country.
I expect to return a response that I can extract the temperature from it. Instead I get the following response

Response {type: 'cors', url: 'http://api.openweathermap.org/data/2.5/weather?zip=90040&appid=xxxxxxxxxxxxxxxx', redirected: false, status: 200, ok: true, …}
body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://api.openweathermap.org/data/2.5/weather?zip=90040&appid=xxxxxxxxxxxxxxxx"
[[Prototype]]: Response

I can't get any data from it. Any advice how I can get temperature of that response?

this is my URL build code

// build URL 
const feelings = document.getElementById('feelings')
const baseURL = 'http://api.openweathermap.org/data/2.5/weather?zip='
const ZIP = document.getElementById('zip')

const getWeatherData = async (baseURL, ZIP, KEY) => {
    await fetch(`${baseURL}${ZIP}&appid=${KEY}`)
    .then(function(data){
        postData('/addData', {
            temp: data.body,
            date: newDate,
            feelings: feelings
        })
    })
}

and the server side code

// POST route
app.post('/addData', (req, res) => {

    newEntry = {
        temp: req.body.temp,
        date: req.body.date,
        feelings: req.body.feelings
    }
    projectData.push(newEntry)
    res.send(projectData)
})

What I have tried:

I tried to get the temperature from the response but I failed to extract it from the above response.

Posted 10-Dec-21 2:43am

Member 13622627

Updated 10-Dec-21 3:29am

v2

Add a Solution

Comments

CHill60 10-Dec-21 8:51am

I know it says it will default to US if no country passed, but have you tried explicitly using "us"?

Member 13622627 10-Dec-21 9:14am

yes. Same issue.

Richard MacCutchan 10-Dec-21 9:00am

The response code says that the call succeeded. Where is the remainder of the content?

Member 13622627 10-Dec-21 9:14am

I modified the response in the post. Please check it.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2021-12-10T03:29:00

Mixing async with the older-style .then continuations seems like a waste.

You also need to read the content of the response before you can use it.

JavaScript

const getWeatherData = async (baseURL, ZIP, KEY) => {
    const response = await fetch(`${baseURL}${ZIP}&appid=${KEY}`);
    if (!response.ok) {
        const errorMessage = await response.text();
        console.error(response.status, response.statusText, errorMessage);
        alert("Unable to retrieve weather data.");
        return;
    }
    
    const data = await response.json();
    await postData('/addData', {
        temp: data.main.temp,
        ...
    });
}

async function - JavaScript | MDN[^]
Using Fetch - Web APIs | MDN[^]