React Native getting collections from Zomato API

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?

can you share the code in an expo snack? ill help you. it should be working though — Gaurav Roy, Jan 04 '20 at 09:19

score 1 · Accepted Answer · answered Jan 04 '20 at 09:54

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;

It's crazy how to smallest, most unnoticed mistakes are what always gets me XD Thank you! — CoolMAn, Jan 04 '20 at 10:05

manoharglm · Answer 2 · 2020-01-04T09:36:10.823

0

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}))

edited Jan 04 '20 at 09:36

answered Jan 04 '20 at 09:16

manoharglm

21
1
7

can you please show how it would look? I'm not sure how to use `.then` – CoolMAn Jan 04 '20 at 09:24
this doesn't seem to work :/ at the risk of seeming redundant; I've tried to console.logging a simple term in my `finally` stage and nothing it outputted – CoolMAn Jan 04 '20 at 09:41
In that case I prefer you to read some documentation it may help you https://www.npmjs.com/package/axios – manoharglm Jan 04 '20 at 09:48

React Native getting collections from Zomato API

2 Answers2