#8 Weather API (React.js) - Advent of JS

1. Overview

Challenge & starter files: Advent of JS

Full codes: nilstarbb/advent-of-js/8-weather-api

Live Demo: 08 - Weather API || Advent of JavaScript

Preview:

2. Details

Users should be able to:

view weather for the upcoming week

3. Coding

Setup React template

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link rel="stylesheet" href="./styles.css" />

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>

  <body>
    <div class="wrapper menu" id="wrapper"></div>
    <script type="text/babel" src="./script.js"></script>
  </body>
</html>

script.js:

const { useState, useEffect } = React;

const App = () => {
  return (
    <>
			...
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("wrapper"));

Import weather API data

本项目使用的 data sample 来自免费而且无需 Auth 的天气预报 API: MetaWeather。

从 MetaWeather 获取的 weather forecast data 如下：

{
  "consolidated_weather": [
    {
      "id": 5204212452425728,
      "weather_state_name": "Light Cloud",
      "weather_state_abbr": "lc",
      "wind_direction_compass": "NNE",
      "created": "2022-01-13T22:16:25.565480Z",
      "applicable_date": "2022-01-14",
      "min_temp": -14.79,
      "max_temp": -2.645,
      "the_temp": -8.100000000000001,
      "wind_speed": 11.419388193963256,
      "wind_direction": 13.0,
      "air_pressure": 1023.5,
      "humidity": 56,
      "visibility": 15.385461405392508,
      "predictability": 70
    },
	...

其中包含项目所需的 weather state, data, temperature, min temperature, precipitation。

也有别的开源免费天气 API 可以使用，具体见：public-apis/public-apis#weather。

Fetch data in React component

React component 可以用 useEffect 和 fetch 获取 API data（详见：AJAX and APIs - React）。

需要注意的是，由于 same-origin policy，无法直接在 component 内部连接外部 API，即使在 fetch 里加上 mode: "no-cors" 或者设置 header 也会报错。

失败的例子：

useEffect(() => {
  fetch("https://www.metaweather.com/api/location/4118", {
    method: "get",
    mode: "no-cors",
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers':"*"
    }
  })
    .then((res) => res.json())
    .then(
      (result) => {
        console.log(result);
      },
      (error) => {
        console.log(error);
      }
    );
}, []);

会出现的报错有：

SyntaxError: Unexpected end of input

Access to fetch at '...' from origin '...' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Access to fetch at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

处理 CORS 问题的办法有很多种，不过这只是一个练手的小项目，为了方便，可以直接把从 MetaWeather API 返回的 result 放在本地的 data.json 里，然后让 component 从中获取 data（正经的生产项目绝对不要这么做）。

const App = () => {
  const [weatherData, setWeatherData] = useState([]);

  useEffect(() => {
    fetch("data.json")
      .then((res) => res.json())
      .then(
        (result) => {
          ...
        },
        (error) => {
          console.log(error);
        }
      );
  }, []);

  ...
};

MetaWeather API 获取的 data 格式不一样，不方便直接用，在传递给 component 前最好处理一下：

const weatherMap = {
  "Light Cloud": "partly-cloudy",
  "Heavy Cloud": "cloudy",
  Snow: "snowy",
  Thunder: "stormy",
  Clear: "sunny",
  Showers: "rainy",
};

const App = () => {
  ...

  useEffect(() => {
    fetch("data.json")
      .then((res) => res.json())
      .then(
        (result) => {
          const res = result.consolidated_weather.map((weather) => {
            const date = new Date(weather.applicable_date);
            return {
              id: weather.id,
              date: date.getDate(),
              day: date.getDay(),
              weather: weatherMap[weather.weather_state_name],
              temperature: weather.the_temp.toFixed(0),
              low: weather.min_temp.toFixed(0),
              precipitation: weather.predictability,
            };
          });
          setWeatherData(res);
        },
        (error) => {
          console.log(error);
        }
      );
  }, []);

  ...
};

最后把 data 传递给 component 进行渲染即可：

const Weather = ({ weather }) => {
  return (
    <div className="day">
      <div className="day-of-week">{daysOfWeekMap[weather.day]}</div>
      <div className="date">{weather.date}</div>

      <div className={"bar " + weather.weather}>
        <div className="weather">
          <svg
            role="img"
            width={iconNameToSizeMap[weather.weather].width}
            height={iconNameToSizeMap[weather.weather].height}
            viewBox={
              "0 0 " +
              iconNameToSizeMap[weather.weather].width +
              " " +
              iconNameToSizeMap[weather.weather].height
            }
          >
            <use xlinkHref={"#" + weather.weather}></use>
          </svg>
        </div>
        <div className="temperature">
          {weather.temperature}
          <span className="degrees">&deg;</span>
        </div>
        <div className="content">
          <div className="precipitation">
            <svg role="img" className="icon">
              <use xlinkHref="#precipitation"></use>
            </svg>
            {weather.precipitation}%
          </div>
          <div className="low">
            <svg role="img" className="icon">
              <use xlinkHref="#low"></use>
            </svg>
            {weather.low}&deg;
          </div>
        </div>
      </div>
    </div>
  );
};

const App = () => {
  ...

  return (
    <>
      {weatherData.map((weather) => (
        <Weather key={weather.id} weather={weather} />
      ))}
    </>
  );
};

1. Overview#

2. Details#

3. Coding#

Setup React template#

Import weather API data#

Fetch data in React component#