React Native flatlist data is not displaying - react-native

Question

Iam using fetch API to show Flatlist data in my screen.
Here is the Json data that i am getting
{
"requestDetails": "facilityList",
"data": [
{
"facilityId": 73,
"name": "ALS-ALL SAINTS HOSPITAL-NTX",
"facilitY_PFX": "ALS",
"isFromAllScripts": false
},
{
"facilityId": 74,
"name": "BHVH-BAYLOR HEART AND VASCULAR HOSPITAL-NTX",
"facilitY_PFX": "BHVH",
"isFromAllScripts": false
},
{
"facilityId": 78,
"name": "BUMC-BAYLOR UNIVERSITY MEDICAL CENTER HOSPITAL-NTX",
"facilitY_PFX": "BUMC",
"isFromAllScripts": false
},
{
"facilityId": 79,
"name": "CAR-CARROLLTON HOSPITAL-NTX",
"facilitY_PFX": "CAR",
"isFromAllScripts": true
},
{
"facilityId": 81,
"name": "DEN-TEXAS HEART HOSPITAL BAYLOR DENTON-NTX",
"facilitY_PFX": "DEN",
"isFromAllScripts": true
},
]
Here is my code
import React from 'react';
import { ActivityIndicator, Text, View, StyleSheet, TouchableOpacity, FlatList } from 'react-native';
interface IState {
isLoading: boolean;
dataSource: any;
}
export default class FacilityList extends React.Component<{}, IState> {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
};
this.renderItem = this.renderItem.bind(this);
}
componentDidMount() {
return fetch(Request_url)
.then((response) => response.json())
.then((responseJson) => {
// just setState here e.g.
this.setState({ dataSource: responseJson.data, isLoading: false });
})
.catch((error) => {
console.error(error);
});
}
renderItem = ({ item }) => {
return (
<View >
<Text >{item.name}</Text>
</View>
);
}
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
renderItem={this.renderItem}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
alignContent: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
},
touchButton: {
alignSelf: 'center',
backgroundColor: '#2980b9',
paddingVertical: 25,
width: 295,
margin: 15,
},
touchButtonText: {
textAlign: 'center',
color: '#ffffff',
fontWeight: 'bold'
},
});
but nothing is displaying in my screen with this code, i am getting a blank screen
please let me know if there is anything wrong in my code and why the data is not getting displayed without any errors.
Update:
I am sorry, i have to pass a token in the header, after passing the token it was working fine.

Answer 1

Try this snippet.
var newData = "{\"requestDetails\": \"facilityList\",\"data\": [{\"facilityId\": 73,\"name\": \"ALS-ALL SAINTS HOSPITAL-NTX\",\"facilitY_PFX\": \"ALS\",\"isFromAllScripts\": false},{\"facilityId\": 74,\"name\": \"BHVH-BAYLOR HEART AND VASCULAR HOSPITAL-NTX\",\"facilitY_PFX\": \"BHVH\",\"isFromAllScripts\": false}]}";
var jsonObj = JSON.parse(newData);
console.log(jsonObj.data[0].name);

Answer 2

Do you declare Request_url somewhere? or maybe you put a link directly?