react-nativezomato-api

React Native Zomato API reviews not being displayed


I am trying to display review information from the Zomato API however for some reason nothing is being displayed.

I am using a FlatList to put it all out there, but every time I compile the code nothing seems to show up.

Here is all my code regarding the subject:

<Text>REVIEWS:</Text>
            {this.state.data.all_reviews_count == 0 ?
                <View style={{ flex: 1, padding: 20, marginTop:0}}>
                  <Text style={{ color: '#000', fontWeight: 'bold' }}>No reviews for this restaurant yet</Text>
                </View> :
        <FlatList
                  keyExtractor={item => item.id}
                  showsVerticalScrollIndicator={false}
                  data={this.state.data}
                  renderItem={({ item }) => 
                  <View>
                    <Text>{item.all_reviews_count}</Text>
                  </View>}/>}

I have other data being retrieved and it's all being outputted just fine. for some reason the review section seems to be weird.

I also checked to see how reviews are displayed in the terminal and this is what I got:

 "all_reviews": Object {
    "reviews": Array [
      Object {
        "review": Array [],
      },
      Object {
        "review": Array [],
      },
      Object {
        "review": Array [],
      },
      Object {
        "review": Array [],
      },
      Object {
        "review": Array [],
      },
    ],
  }

hopefully somebody with experience with the Zomato Api can help me out


Solution

  • The way you retrieve & display data is wrong. Check below sample

    import React, { Component } from 'react';
    import { ActivityIndicator, FlatList, Text, View } from 'react-native';
    import axios from 'axios';
    
    export default class Example extends Component {
    
        constructor(props) {
            super(props);
            this.state = {
                isLoading: true,
                all_reviews: {}
            }
        }
    
        async componentDidMount() {
            try {
                let result = await axios.request({
                    method: 'GET',
                    url: "https://developers.zomato.com/api/v2.1/reviews?res_id=16774318",
                    headers: {
                        'Content-Type': 'application/json',
                        'user-key': "af26b7a0e16fb73e6a30ad33cb9c6634",
                    },
                })
                this.setState({
                    isLoading: false,
                    all_reviews: result.data
                })
            } catch (err) {
                err => console.log(err)
            }
    
        }
    
        render() {
            return (
                <View>
                    {
                        this.state.isLoading ?
                            <View style={{ flex: 1, padding: 20 }}>
                                <ActivityIndicator />
                            </View> :
                            <View>
                                <Text>REVIEWS:</Text>
                                {
                                    this.state.all_reviews.user_reviews.length == 0 ?
                                        <View style={{ flex: 1, padding: 20, marginTop: 0 }}>
                                            <Text style={{ color: '#000', fontWeight: 'bold' }}>No reviews for this restaurant yet</Text>
                                        </View> :
                                        <FlatList
                                            keyExtractor={item => item.id}
                                            showsVerticalScrollIndicator={false}
                                            data={this.state.all_reviews.user_reviews}
                                            renderItem={({ item }) =>
                                                <View>
                                                    <Text>{item.review.rating}</Text>
                                                </View>}
                                        />
                                }
                            </View>
                    }
                </View>
            );
        }
    }
    

    Change this code according to your requirements & if you have doubts feel free to ask.

    Hope this helps you.