React Native render nested Json - json

Question

After loading a JSON object and adding it to this.state, I am not able to access levels below the first level. Given this JSON file:
{
"ts": 1530703572,
"trend": {
"val": 0,
"text": "gleichbleibend"
},
"baro": 1011.3453734999999,
"temp": {
"out": {
"f": 85.9,
"c": 29.9
}
},
"hum": {
"out": 28
},
"wind": {
"speed": {
"mph": 2,
"kmh": 3.2
},
"avg": {
"mph": 3,
"kmh": 4.8
},
"dir": {
"deg": 192,
"text": "SSW"
}
},
"rain": {
"rate": 0,
"storm": 0,
"day": 0,
"month": 0,
"year": 451.358
},
"et": {
"day": 88,
"month": 81,
"year": 1802
},
"forecast": {
"val": 6,
"rule": 45,
"text": "Zunehmend wolkig bei gleichbleibender Temperatur."
},
"sun": {
"uv": 6.2,
"rad": 779,
"rise": "4:27",
"set": "20:35"
}
}
the following results:
{this.state.weatherList.ts} works: 1530703572
{this.state.weatherList.temp.out.c} "TypeError: Undefined is not an object (Evaluating: 'this.state.weatherList.temp.out')
The Code:
export default class Weather extends React.Component {
constructor(props) {
super(props)
this.state = {
weatherList: []
}
getPlannerData().then(data => {
this.setState({
weatherList: data
})
})
}
return (
<ScrollView>
<View>
<View>
<Text>{this.state.weatherList.temp.out.c}</Text>
</View>
</View>
</ScrollView>
)
}
}
async function getPlannerData() {
let data = await fetchApi('url')
return data
}
async function fetchApi(url) {
try {
let response = await fetch(url)
let responseJson = await response.json()
console.log(responseJson)
return responseJson
} catch (error) {
console.error(error)
return false
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22
},
sectionHeader: {
paddingTop: 2,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 2,
fontSize: 14,
fontWeight: 'bold',
backgroundColor: 'rgba(247,247,247,1.0)'
},
item: {
padding: 10,
fontSize: 18,
height: 44
}
})
The question is how I can alter the code, so I can access the nested elements like "temp".
I tried it with renderItem and {this.state.weaetherList.map((item, i) => without success.
Thanks in advance!

Answer 1

Before your weatherList object is set, anything further than one level down your object will result in an error. this.state.weatherList.ts will not give an error, since it will just be undefined before your request is finished.
You could e.g. keep a state variable loading and only render when you request has finished to get around this.
Example
class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
weatherList: {}
};
getPlannerData().then(data => {
this.setState({
loading: false,
weatherList: data
});
});
}
render() {
const { loading, weatherList } = this.state;
if (loading) {
return null;
}
return (
<ScrollView>
<View>
<View>
<Text>{weatherList.temp.out.c}</Text>
</View>
</View>
</ScrollView>
);
}
}