Help Setting Up Alert API

[numenor-dev]

Hi,

I'm just looking for guidance on fetching data from a weather alert API by using https://api.weather.gov/alerts in React JS.

I thought I had set it up correctly:

`class FetchWeatherData extends Component {

state = {
    loading: true,
    alert: null
};

async componentDidMount() {
    const url = "https://api.weather.gov/alerts";
    const response = await fetch(url, {
        method: 'GET',
        headers: {
          useragent: 'nick-ahlers',
          Accept: 'application/json',
        },
      });;
    const data = await response.json();
    this.setState({ alert: data.features[0], loading: false });
    console.log(data);
}

render() {
    return (
        <div>
            {this.state.loading || !this.state.alert ? (
              <div>loading...</div> 
              ) : (
                <div>
                    <div>{this.state.alert.properties.description}</div>
                </div>
              )}
        </div>
    );
}

}`

So far nothing is returned and console shows "Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource."

Any help is appreciated!

[JJKraw]

Check the Specification tab under https://www.weather.gov/documentation/services-web-api for the allowable Accept headers for the /alerts endpoint. "application/json" doesn't work. I don't know if this will fix it, but it's necessary for the fetch to succeed.

[numenor-dev]

Thanks a lot JJKraw! Much appreciated. I will give this a shot.

[numenor-dev]

I should also mention that fetching the /alerts endpoint could return a LOT of data, particularly if the weather nationwide is especially active. What I do is fetch /alerts/active/count and then do a fetch for each "area" returned via /alerts/active/area/{area}.

Do you write this all within the same GET request or do two separate requests?

[JJKraw]

It takes multiple requests - one for the count, and then one for each area that has active alerts.

E.g. https://api.weather.gov/alerts/active/count returns the following areas right now:

"areas": {
        "AK": 1,
        "AL": 2,
        "AM": 11,
        "AN": 14,
        "AR": 11,
        "AZ": 1,
        "CA": 2,
        "CO": 3,
        "IA": 6,
        "ID": 4,
        "IL": 13,
        "IN": 23,
        "KY": 2,
        "LA": 20,
        "LE": 3,
        "LH": 1,
        "LO": 2,
        "LS": 3,
        "MD": 2,
        "MN": 3,
        "MO": 2,
        "MS": 5,
        "NE": 5,
        "NH": 1,
        "NM": 2,
        "OH": 12,
        "PA": 1,
        "PH": 1,
        "PK": 37,
        "PZ": 15,
        "SD": 1,
        "TN": 1,
        "TX": 25,
        "VA": 1,
        "WI": 7,
        "WV": 5,
        "WY": 6
    },

This is followed by multiple fetches of the form https://api.weather.gov/alerts/active/area/AK

[numenor-dev]

Ah that is great info thank you. I'm so close, just wondering what you use in your User-Agent authorization header. I can't seem to write it in a way that JS likes and weather.gov accepts. Have tried 'user-agent: my name' and 'user-agent': 'my name'

[JJKraw]

I fetch from PHP, so I'm not sure how to correctly code it from JS.

[netbymatt]

If you're using JS in the browser you won't be able to set the user agent. It will always be sent as the user agent the browser sends. If you're using node you can set the user agent https://nodejs.org/dist/latest-v14.x/docs/api/http.html#http_request_setheader_name_value request.setHeader('User-Agent', '<custom user agent>');

…

On Wed, May 12, 2021, 3:53 PM JJKraw ***@***.***> wrote: I fetch from PHP, so I'm not sure how to correctly code it from JS. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#409 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMIJCKKIX37LROLPPA7BASTTNLTE7ANCNFSM44PWJKWA> .

[numenor-dev]

Ah excellent, thank you netbymatt!