React Native How to store and process JSON data? - json

Question

I am a total beginner in React Native programming. I've had a difficulty finding a tutorial explaining how to do this.
I am fetching a bus schedule data from a web API.
I want to do the following.
Store JSON data inside a variable or something.
Run a function on that JSON data to return appropriate bus data
I have two questions regarding this.
How can I store JSON data inside a variable or locally somehow?
If I want to run a JavaScript function on the JSON data, where do I do it? Inside a separate component's render() function?
What I've tried
I declared let jsondata outside of the class.
Inside componentDidMount I stored responseJson to jsondata using an anonymous function. When I console.log it there, it shows the JSON data properly.
However, when I try to {console.log(jsondata)} after Flatlist, it returns undefined while "Hello" logs correctly.
Why is it behaving this way? How can I use the jsondata?
Code
import React from 'react';
import { FlatList, ActivityIndicator, Text, View } from 'react-native';
let jsondata;
export default class FetchExample extends React.Component {
constructor(props){
super(props);
this.state ={ isLoading: true}
}
// make an API call in the beginning
componentDidMount(){
return fetch('https://api.myjson.com/bins/18o9sd')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.shosfc.weekday[7]
}, function(){
jsondata = responseJson;
// console.log(jsondata)
});
})
.catch((error) =>{
console.error(error);
});
}
render(){
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 50}}>
<ActivityIndicator/>
</View>
)
}
return(
<View style={{flex: 1, paddingTop:50}}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item.min}</Text>}
// keyExtractor={({id}, index) => id}
/>
{console.log(jsondata)}
</View>
);
}
}

Answer 1

How can I store JSON data inside a variable or locally somehow?
You can put it in a state value, and use local storage for storage.
Status value delivery
this.state ={ jsondata:{}}
...
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.shosfc.weekday[7],
jsondata = responseJson
});
console.log(this.state.jsondata);
}
Store data locally
import {AsyncStorage} from 'react-native';
...
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.shosfc.weekday[7],
});
AsyncStorage.setItem('jsondata', JSON,stringify(responseJson));
}
If I want to run a JavaScript function on the JSON data, where do I do it? Inside a separate component's render() function?
I find this question difficult to understand. But the answer to this question I understand is that you can declare and use a function outside of JSON.
thisfunc(){
alert("function in Json")
}
...
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.shosfc.weekday[7],
});
this.thisfunc.bind(this)
}

Answer 2

Add jsonResponse in state try this.
import React from 'react';
import { FlatList, ActivityIndicator, Text, View } from 'react-native';
export default class FetchExample extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
apiResponseJson:null
};
}
// make an API call in the beginning
componentDidMount() {
return fetch('https://api.myjson.com/bins/18o9sd')
.then(response => response.json())
.then(responseJson => {
this.setState(
{
isLoading: false,
dataSource: responseJson.shosfc.weekday[7],
apiResponseJson : responseJson.shosfc
},
);
})
.catch(error => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, padding: 50 }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={{ flex: 1, paddingTop: 50 }}>
<FlatList
data={this.state.dataSource}
renderItem={({ item }) => <Text>{item.min}</Text>}
// keyExtractor={({id}, index) => id}
/>
{console.log(this.state.apiResponseJson)}
</View>
);
}
}