I'm encountering difficulties accessing the JSON data retrieved from the Accuweather API in React's Render Method.
Despite seeing the value in the JSON view after opening and formatting the link, I keep getting an 'undefined' error on React. I've attempted to use the dot method without success.
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
this.state = {
items:[],
isLoaded: false,
}
}
componentDidMount() {
fetch('http://dataservice.accuweather.com/forecasts/v1/daily/1day/2094578.json?details=true&apikey=JjaFgoA67A3eXoMR7SiRyprGyPiv4Eln')
.then(res => res.json())
.then(json => {
this.setState({
isLoaded:true,
items:json,
})
})
}
render() {
var {isLoaded, items} = this.state;
if (!isLoaded) {
return <div> Loading...</div>;
}
else {
return (
<div className="App">
<h1>IES Storm Water Forecast</h1>
<h1>{new Date().toString()}</h1>
<h2> Weather Forcast: {items["DailyForecasts"]["Day"]["ShortPhrase"]}</h2>
<h3>Description: {items.Headline.Text}</h3>
<h6>Source: Accuweather</h6>
</div>
);
}
}
}
export default App;
JSON object in there:
I receive the following errors:
Unhandled Rejection (TypeError): Cannot read property 'ShortPhrase' of undefined TypeError: Cannot read property 'ShortPhrase' of undefined
However, I should be receiving a short weather sentence.