React Native parsing response JSON into a flatlist

Question

I am trying to parse the response JSON from the following json data:

{
  "location_id": 73,
  "location_name": "Aunt Mary's Great Coffee Shop",
  "location_town": "London",
  "latitude": 74.567,
  "longitude": 102.435,
  "photo_path": "http://cdn.coffida.com/images/78346822.jpg",
  "avg_overall_rating": 4.5,
  "avg_price_rating": 4.3,
  "avg_quality_rating": 4,
  "avg_clenliness_rating": 3.8,
  "location_reviews": [
    {
      "review_id": 643,
      "overall_rating": 4,
      "price_rating": 2,
      "quality_rating": 3,
      "clenliness_rating": 5,
      "review_body": "Great coffee, but the bathrooms stank!",
      "likes": 4654
    }
  ]
}

i am trying to parse the data fromt the location_ reviews array object. i am successfully recieving the data as i have checked in a console.log

i have also successfully recieved and printed the location name and id onto the screen

/* eslint-disable curly */
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable semi */
/* eslint-disable prettier/prettier */
    import React, {Component} from 'react';
    import {View, Text, ToastAndroid, FlatList, TouchableOpacity, StyleSheet} from 'react-native';

    class Location extends Component {
       constructor(props) {
        super(props);

        this.state = {
          locations: [],
          isLoading: true,
        };
      }

      getData = async () => {

        let loc_id = this.props.route.params.location_id;

        return await fetch(`http://10.0.2.2:3333/api/1.0.0/location/${loc_id}`, {
            method: 'get',
            'headers': {
                'Content-Type': 'application/json',
              },
            })
        .then((response) => {
              if (response.status === 200) {
                return response.json();
              } else if (response.status === 404) {
                ToastAndroid.show('Unable to locate location', ToastAndroid.SHORT);
              } else {
                throw 'something went wrong';
              }
            })
        .then((responseJson) => {

                const review = responseJson.location_reviews[0]
                console.log(review);

                this.setState({
                    locations: responseJson,
                    isLoading: false,
                  });

            })
        .catch((error) => {
              ToastAndroid.show(error.toString(), ToastAndroid.SHORT);
            });
      }

      renderItem = ({item, index}) => {
        let { locations } = item;

        if (!locations[0]) return null;
        let details = locations[0]

        return (
        <View>
            <View>
                <Text>{details.review_body}</Text>
                <Text>{details.review_id}</Text>
           </View>
        </View>
        );
      }

      keyExtractor = (item, index) => {
        return index.toString();
      }

      render() {
          return (
            <View style={styles.space}>
                  <TouchableOpacity
                  style={styles.space}
                    onPress = {() => this.getData()}
                  >
                          <View>
                              <Text>get data</Text>
                              <Text>Location id: {this.props.route.params.location_id}</Text>
                          </View>
                  </TouchableOpacity>

                  <View>
                    <Text style={styles.space}>{this.state.locations.location_name}</Text>
                    <Text style={styles.space}>{this.state.locations.location_town}</Text>
                  </View>

                  <View style={{flex: 1}}>
                      <FlatList
                        data={this.state.dataSource}
                        keyExtractor={this.keyExtractor}
                        renderItem={this.renderItem}
                      />
                  </View>

            </View>
              );
        }


   }

   const styles = StyleSheet.create({

    space: {
      margin: 20,
      padding: 20,
    },

   });

    export default Location;

however i am completely stuck on how the access the array of location review data(review_id, review_body etc.)

any ideas would be appreciated

Answer 1

i managed to get the flatlist to compile using the following

  render() {
    if (this.state.isLoading) {
      return (
        <View>
          <Text>loading...</Text>
        </View>
      )
    } else return (
                  <View>
                      <Text>Name: {this.state.locations.location_name}</Text>
                      <FlatList
                        data={this.state.locations.location_reviews}
                        renderItem={({item}) => (
                          <View>
                              <Text>review id: {parseInt(item.review_id)}</Text>
                              <Text>body: {item.review_body}</Text>
                              <Text>overall rating: {parseInt(item.overall_rating)}</Text>
                              <Text>price rating: {parseInt(item.price_rating)}</Text>
                              <Text>quality rating: {parseInt(item.quality_rating)}</Text>
                              <Text>cleanliness rating: {parseInt(item.clenliness_rating)}</Text>
                          </View>
                        )}
                        keyExtractor={(item) => item.review_id.toString()}
                      />
                  </View>
          );
    }

Answer 2

Note that the json_data you have above is an object, and FlatList must receive an array (it then calls renderItem with each item in that array, and displays this list of items).

There are a few changes you should make (I'm assuming that you want the FlatList to display a list of items from the location_reviews array):

1. In your constructor, the location field should be an object, and it is initially null :

this.state = {
  location: null,
}
  

2. In your render method, first check this.state.location exists and render nothing or a loading screen if it does not:

render() {
  const { location } = this.state;

  if (location === null) return null;
  ...
}

3. In your render method, pass this.state.location.location_reviews to your FlatList :

const { location } = this.state;

<FlatList
  data={location.location_reviews}
  ...
/>

4. Finally, adjust your renderItem method:

renderItem = ({item, index}) => {
  return (
    <View>
        <Text>{item.review_body}</Text>
        <Text>{item.review_id}</Text>
    </View>
  );
}

Note: I have not tested this as the snack does not work. You might need to adjust a few more things (ie. I changed this.state.locations -> this.state.location, etc.)