how to render nested json data into flatlist in react native using functional component

Question

this is the json data i am using

const RestaurantsData = [ {

    "BeveragesData": [


        {
            id: 1,
            title: 'Thick Shake Factory',
            price: 210,
            Image: require('../../assests/images/thickchake.jpg'),

        },

        {
            id: 2,
            title: 'Thick Shake Factory',
            price: 120,
            Image: require('../../assests/images/thickchake.jpg'),

        },
        {
            id: 3,
            title: 'Juice Point',
            price: 180,
            Image: require('../../assests/images/juicepoint.jpg'),

        },
        {
            id: 4,
            title: 'Juice Point',
            price: 320,
            Image: require('../../assests/images/juicepoint.jpg'),

        },



    ],

    "DesertsData": [

        {
            id: 1,
            title: 'Deserts Shop',
            price: 120,
            Image: require('../../assests/images/desert1.jpg'),

        },

        {
            id: 2,
            title: 'Cool Deserts',
            price: 100,
            Image: require('../../assests/images/desert2.jpg'),

        },
        {
            id: 3,
            title: 'Paradise',
            price: 80,
            Image: require('../../assests/images/paradise.png'),

        },
        {
            id: 4,
            title: 'Juice Point',
            price: 154,
            Image: require('../../assests/images/desert2.jpg'),


        },


    ]

} ] export default RestaurantsData;

this is my code

import React from "react"; import { Text, Image, TouchableOpacity,
> StyleSheet, View, FlatList, ImageBackground } from 'react-native';
> import RestaurantsData from '../screens/Data/data';
> 
> const Restaurant = (props) => {
>     const Data = props.route.params
>     const renderItem = ({ item }) => {
>         return (
>             <View style={styles.flatlist}>
>                 <Image source={item.Image} style={styles.flatlistimage} />
>                 <TouchableOpacity >
>                     <Text style={{ fontSize: 20, color: 'black', fontWeight: 'bold' }}>{item.title}</Text>
>                 </TouchableOpacity>
>             </View>
>         )
>     }
>     return (
>         <View style={styles.container}>
>             <FlatList
>                 data={RestaurantsData }
>                 renderItem={renderItem}
>                 keyExtractor={item => item.id}
>             />
>         </View>
>     ) }
> 
> export default Restaurant;

Do you want to render both BeveragesData and DesertsData ? – Alpha Sep 05 '22 at 07:39 — Alpha, Sep 05 '22 at 07:39

score 0 · Accepted Answer · answered Sep 05 '22 at 08:01

0

You did not provide enough information like how you want to structure your JSX. But this is how you can render nested data.

Example:

 <View style={styles.container}>
  <FlatList
    data={RestaurantsData}
    renderItem={({ item }) => {
      return (
        <>
          {item.BeveragesData.map((secItem) => (
            <View key={secItem.id}>
              <Text>{secItem.title}</Text> <Text>{secItem.price}</Text>
            </View>
          ))}

          {item.DesertsData.map((secItem) => (
            <View key={secItem.id}>
              <Text>{secItem.title}</Text> <Text>{secItem.price}</Text>{" "}
            </View>
          ))}
        </>
      );
    }}
  />
</View>;

answered Sep 05 '22 at 08:01

Alpha

1,413
3
9
23

thankyou Alpha for your reply here i want to display restaurants data based on user click if user click on beverages that data only display or if user clicks on deserts only thata data should open so that like i created 8 categories of food items – ReactNative Sep 05 '22 at 11:22
If user clicks on it should show all beverages and if user click on deserts it should show all deserts data right ? – Alpha Sep 05 '22 at 12:07
thankyou for reply I am new to react, yes but here I am stuck at how to apply condition if user click only particular data should display remaining will no display i stuck at that point can you please help me – ReactNative Sep 07 '22 at 05:24

how to render nested json data into flatlist in react native using functional component

1 Answers1