React Native getting collections from Zomato API - react-native

Question

I am trying to get collections from Zomato API (https://developers.zomato.com/documentation) and I am trying to retrieve the collections list and display them onto a flatList. However every time I try to retrieve it my terminal seems to output undefined
Here is my code
async componentDidMount(){
try {
const res = await axios.request({
method: 'get',
url: `https://developers.zomato.com/api/v2.1/collections`,
headers: {
'Content-Type': 'application/json',
'user-key': 'a31bd76da32396a27b6906bf0ca707a2'
},
params: {
'city_id': `${this.state.loca}`
}
});
this.setState({ data: res.data });
console.log(res.data.collections.title)
} catch (err) {
console.log(err);
} finally {
this.setState({ isLoading: false });
}
};
when I console.log(res.data.collections) I get the entire list of all components within the collections Array from the API. However when I try to access the title component; the terminal outputs undefined
what am I doing wrong?

Answer 1

Do check out the below code, i think there was a small problem with your code, you were not extracting the exact data. Ive corrected it by displaying the title of restuarent. you can do more. expo link is as expo-link
import React from 'react';
import {
View,
Text,
FlatList,
StyleSheet,
TouchableHighlight,
Dimensions,
Image,
} from 'react-native';
import Modal from 'react-native-modal';
import { createAppContainer } from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import { Card, Icon, Button } from 'react-native-elements';
import Constants from 'expo-constants';
// import {apiCall} from '../src/api/Zomato';
// import Logo from '../assets/Logo.png';
import axios from 'axios';
export default class HomeScreen extends React.Component {
constructor(props){
super(props);
// this.navigate = this.props.navigation.navigate;
this.state={
data : [],
isModalVisible: false,
loca: 280
}
}
async componentDidMount(){
try {
const res = await axios.request({
method: 'get',
url: `https://developers.zomato.com/api/v2.1/collections`,
headers: {
'Content-Type': 'application/json',
'user-key': 'a31bd76da32396a27b6906bf0ca707a2'
},
params: {
'city_id': `${this.state.loca}`
}
});
// alert(res.data.collections, 'response');
this.setState({ data: res.data.collections });
} catch (err) {
console.log(err);
} finally {
}
}
render() {
return (
<View>
<FlatList
style={{marginBottom: 80}}
keyExtractor={item => item.id}
data={this.state.data}
renderItem={({ item }) =>
<TouchableHighlight onPress={()=> this.props.navigation.navigate('CategoryScreen', { category: item.categories.id, city: this.state.loca })}>
<Card>
<Text style={{color:'#000',fontWeight:'bold'}}>{item.collection.title} </Text>
</Card>
</TouchableHighlight>}
/>
</View>
);
}
}
do revert if any doubts, ill clear it. hope it helps;

Answer 2

Axios returns a promise try keeping the setState in .then and stop trusting console.log
axios.request({
method: 'get',
url: `https://developers.zomato.com/api/v2.1/collections`,
headers: {
'Content-Type': 'application/json',
'user-key': 'a31bd76da32396a27b6906bf0ca707a2'
},
params: {
'city_id': `${this.state.loca}`
}
}).then( res => this.setState({res}))