Flatlist for nested Json data

Question

I am a bit new to react native and been messing around with JSON for some time. I am trying to implement a flatlist with user name and location details present in local json file. But Json data is not rendering into the flatlist.

Here is my Json file data :

{
    "ok": true,
    "members": [{
            "id": "W012A3CDE",
            "real_name": "Egon Spengler",
            "tz": "America/Los_Angeles",
            "activity_periods": [{
                    "start_time": "Feb 1 2020  1:33PM",
                    "end_time": "Feb 1 2020 1:54PM"
                },
                {
                    "start_time": "Mar 1 2020  11:11AM",
                    "end_time": "Mar 1 2020 2:00PM"
                },
                {
                    "start_time": "Mar 16 2020  5:33PM",
                    "end_time": "Mar 16 2020 8:02PM"
                }
            ]
        },
        {
            "id": "W07QCRPA4",
            "real_name": "Glinda Southgood",
            "tz": "Asia/Kolkata",
            "activity_periods": [{
                    "start_time": "Feb 1 2020  1:33PM",
                    "end_time": "Feb 1 2020 1:54PM"
                },
                {
                    "start_time": "Mar 1 2020  11:11AM",
                    "end_time": "Mar 1 2020 2:00PM"
                },
                {
                    "start_time": "Mar 16 2020  5:33PM",
                    "end_time": "Mar 16 2020 8:02PM"
                }
            ]
        }
    ]
}

My code to display flatlist as follows:

import React, { Component } from 'react'
import { Text, View, StyleSheet, TouchableOpacity, FlatList } from 'react-native';
import {Card} from 'react-native-paper'
import data from '../data/db.json';

export default class UsersScreen extends Component {

    render()
    {
        return(
            <View style={styles.container}>
                <Text style={styles.header}>User Data</Text>
                <FlatList
                    data={data}
                    renderItem={data.members.map(member => {
                        return (
                            <Card>
                                <View style={styles.datacontainer}>
                                    <Text style={styles.name}>{member.id} - {member.real_name}</Text>
                                    <Text style={styles.location}>{member.tz}</Text>
                                </View>
                            </Card>
                        )
                    })}
                    keyExtractor={member=> member.id}
                />
            </View>
        )
    }
}

Please Help in solving this issue!

score 0 · Accepted Answer · answered Sep 24 '20 at 09:06

First, in your case, you should pass data.members as your flatlist data prop, since it is the array you'd like to map on.

Then, the renderItem prop expects a function with a ListRenderItemInfo<ItemT> argument. This argument could be destructured to obtain an item property that would be, in your case, a member.

How to set your FlastList up:

<FlatList
  data={data.members}
  renderItem={({item}) => (
    <Card>
      <View style={styles.datacontainer}>
        <Text style={styles.name}>{item.id} - {item.real_name}</Text>
        <Text style={styles.location}>{item.tz}</Text>
      </View>
    </Card>
  )}
  keyExtractor={member=> member.id}
/>

More info about renderItem here : https://reactnative.dev/docs/flatlist#renderitem

Hi @Oyzuu , Thanks for the above answer. Could you please help me with this issue [link](https://stackoverflow.com/questions/64044228/need-help-in-displaying-react-native-calendar-events) — Jaikiran Jay, Sep 24 '20 at 10:46

score 0 · Answer 2 · answered Sep 24 '20 at 09:23

well to solve this im map to create new Array depend result what i need,

const newData = DATA.members.map((val) => ({
    id: val.id,
    realname: val.real_name,
    tz: val.tz
}));

After that create function for renderItem

const renderItem = ({ item }) => {
return (
  <>
   //You can customize your Component here, its good if reuseable
    <Text>
      {item.id} - {item.real_name}
    </Text>
    <Text>{item.tz}</Text>
  </>
 );
};

and then create keyExtractor in this case you were using id for key

const keyExtractor = () => (item) => item.id;

last embed it to Flatlist

<FlatList
    data={newData}
    renderItem={renderItem}
    keyExtractor={keyExtractor}
  />

Thanks for the above answer, Could you please help me with this issue [link](https://stackoverflow.com/questions/64044228/need-help-in-displaying-react-native-calendar-events) — Jaikiran Jay, Sep 24 '20 at 10:47

Flatlist for nested Json data

2 Answers2