How can I retrieve JSON information from the wunderground API?

Question

How can I retrieve JSON information from the wunderground API?

I have an async function below that connects to a weather API and I am trying to extract two data points: Temperature in Fahrenheit & Celsius. The API_Key has been removed, but it can be obtained for free on the site if needed.

Although my console.log(response) statement confirms that I am receiving the json object, I am unsure of how to access these specific data points within the heavily nested json structure.

For example, when attempting to access 'full' for the full city name by using response.observation_location.full, it does not yield the desired result...

Any assistance would be greatly appreciated.

async loadWeather() {
        // let zip = this.args.zip || 97239;
        let response = await fetch(`http://api.wunderground.com/api/API_KEY/conditions/q/CA/San_Francisco.json`);
        console.log(response);
        this.weather = await response.json();
        // setTimeout( () => { this.loadWeather(); }, 2000);
    }

Below is a snippet from the response json:

{
    "response": {
        "version": "0.1",
        "termsofService": "http://www.wunderground.com/weather/api/d/terms.html",
        "features": {
            "conditions": 1
        }
    },
    "current_observation": {
        "image": {
            "url": "http://icons.wxug.com/graphics/wu2/logo_130x80.png",
            "title": "Weather Underground",
            "link": "http://www.wunderground.com"
        },
        "display_location": {
            "full": "San Francisco, CA",
            "city": "San Francisco",
            "state": "CA",
            "state_name": "California",
            "country": "US",
            "country_iso3166": "US",
            "zip": "94102",
            "magic": "1",
            "wmo": "99999",
            "latitude": "37.77999878",
            "longitude": "-122.41999817",
            "elevation": "60.0"
        },
        "observation_location": {
            "full": "SOMA, San Francisco, California",
            "city": "SOMA, San Francisco",
            "state": "California",
            "country": "US",
            "country_iso3166": "US",
            "latitude": "37.778488",
            "longitude": "-122.408005",
            "elevation": "23 ft"
        },

I have attempted

console.log(response["current_observation"])

to access a nested data value, however, it returns undefined.

javascript json api

Answer 1

Answer №1

So I managed to figure out the solution by myself, but here's a recap:

The response had to be converted to JSON using response.json()

After that, I was able to access the properties as needed

this.weather = await response.json();
console.log(this.weather["current_observation"]["temp_f"]);
console.log(this.weather["current_observation"]["temp_c"]);

Answer 2

So I managed to figure out the solution by myself, but here's a recap:

The response had to be converted to JSON using response.json()

After that, I was able to access the properties as needed

this.weather = await response.json();
console.log(this.weather["current_observation"]["temp_f"]);
console.log(this.weather["current_observation"]["temp_c"]);

How can I retrieve JSON information from the wunderground API?

Answer №1

Similar questions

What is the best way to restrict datalist options while preserving the "value" functionality?

Using JSON as a command line argument on Unix systems

Synchronize JSON data with the Document Object Model (DOM

What could be causing webpack to struggle in locating the loader?

D3 group of legendary elements

HTML is loaded repeatedly using the ajax load() function, without involving JSON

Unit testing in Angular: Testing HTTP functionality with live APIs

Trouble encountered while using useRef in TypeScript

How can I import tamplateData into my JavaScript files in Docpad?

Guide to resetting a CSS animation with pure JavaScript

What is the best way to sort my API responses to display only users who are either currently online or offline?

Utilizing Jquery for comparing and retrieving string arrays

Enhancing JSON Formatting with Angular 4 and Typescript

To begin, formulating a blank state entity containing a collection of key-value pairs with JSON objects as the values. Subsequently, modifying the contents of

triggering e.stopImmediatePropagation() within an onclick event handler

What is the best way to utilize the existing MUI state in order to calculate and show column totals?

Is there a method to verify if a GeoJSON feature is in the shape of a rectangle and locate its corner coordinates?

jQuery grid view for checking the status as even or odd

Preventing special characters in an input field using Angular

When an iteration occurs within a for loop and a value changes, remember to incorporate a line break or equivalent element using jQuery