React Native How to Loop render image and skip null object from API
I have my api like this :
{
"success": true,
"result": [
{
"localityno": "01",
"ocationname": "Sushi xA",
"image1": "www.abc.com/abc1.jpg",
"image2": "www.abc.com/abc2.jpg",
"image3": "www.abc.com/abc3.jpg",
"image4": "www.abc.com/abc4.jpg",
"image5": "www.abc.com/abc5.jpg",
},
{
"localityno": "02",
"ocationname": "Park Zoo",
"image1": "www.abc.com/w1.jpg",
"image2": "www.abc.com/w2.jpg",
"image3": "", <<<<<<< it's null *****
"image4": "www.abc.com/w4.jpg",
"image5": "", <<<<<<< it's null *****
},
]
}
----------------------------------------------
And this is my static render code : it's return blank image if image url it's null
I want to looping and skip null object
Thank You.
componentWillMount() {
return fetch("www.myservice.com/endpoint")
.then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson.result),
}, function() {
});
})
.catch((error) => {
alert("0 : Recrods On This Module ")
});
}
render() {
return (
<View style={{flex: 1, padding: 7,overflow: 'hidden'}}>
<ListView
enableEmptySections={true}
dataSource={this.state.dataSource}
renderRow={
(rowData) =>
<Image source={{uri: rowData.image1}} style={{width: 100, height: 100}} />
<Image source={{uri: rowData.image2}} style={{width: 100, height: 100}} />
<Image source={{uri: rowData.image3}} style={{width: 100, height: 100}} />
<Image source={{uri: rowData.image4}} style={{width: 100, height: 100}} />
<Image source={{uri: rowData.image5}} style={{width: 100, height: 100}} />
}
/>
</View>
);
}
}
export default Feed;