格式化 JSON 响应 API 调用 Typescript

Question

I'm new to Typescript and want to build a simple weather application using Firebase functions. To start I wanted to make an API call to simply retrieve the current temperature of a city.

This is the JSON response from the API call:

{
"latitude": 40.710335,
"longitude": -73.99307,
"generationtime_ms": 0.3579854965209961,
"utc_offset_seconds": 0,
"timezone": "GMT",
"timezone_abbreviation": "GMT",
"elevation": 27.0,
"current_weather": {
    "temperature": 12.3,
    "windspeed": 14.0,
    "winddirection": 181.0,
    "weathercode": 3,
    "time": "2023-01-13T09:00"
},
"hourly_units": {
    "time": "iso8601",
    "temperature_2m": "°C"
},

I want to simply retrieve temperature from current weather when making this API call and here is my current code:

export const getWeather = functions.https.onRequest(async (request, response) => {
  const dataResponse = await fetch("https://api.open-meteo.com/v1/forecast?latitude=40.71&longitude=-74.01&hourly=temperature_2m&current_weather=true");
  const data = await dataResponse.json();

  console.log(data);
  response.send(data);
});

How would I be able to get only one value (temperature) from the JSON response?

Answer 1

Welcome to Stack Overflow!

So looks like you want to access a value from the JSON Object that's being returned from the API Call. In JavaScript, you can do this like so:

myObj.<nested_item1>

So in your case, you want

// should be 12.3 based off your response
const temperature = data.current_weather.temperature 

Hope this helps!

Edit : TypeScript

In TypeScript, if you don't explicitly specify the structure of your data, TS will try to infer the data automatically. In your case, you're making a fetch call which means TS has no context for what the output is.

Imagine it like this, from TS's perspective, the url you hit could contain an API call, a website, or really anything.

To fix this, you have two options:

1. Disable TS for the line (not recommended)

// @ts-ignore
const temperature = data.current_weather.temperature 

2. Define the type of the fetch response

type WeatherData = {
  latitude: number
  longitude: number
  generationtime_ms: number
  utc_offset_seconds: number
  timezone: string
  timezone_abbreviation: string
  elevation: number
  current_weather: {
    temperature: number
    windspeed: number
    winddirection: number
    weathercode: number
    time: string
  }
  hourly_units: {
    time: string
    temperature_2m: string
  }
}

...
const data = await dataResponse.json() as WeatherData
...