How to filter specific data from API and display it in React Native Flatlist?-CodePudding

I am making a react native app to show all live and upcoming coding contests using API. The API results are like this -

Object {
  "duration": "1209300.0",
  "end_time": "2022-06-12T18:25:00.000Z",
  "in_24_hours": "No",
  "name": "HackForGood: Grab Hackathon 2022",
  "site": "HackerEarth",
  "start_time": "2022-05-29T18:30:00.000Z",
  "status": "CODING",
  "url": "https://grabhackforgood.hackerearth.com/",
}
Object {
  "duration": "1641540.0",
  "end_time": "2022-06-19T15:59:00.000Z",
  "in_24_hours": "No",
  "name": "Microsoft Virtual Hackathon 2022",
  "site": "HackerEarth",
  "start_time": "2022-05-31T16:00:00.000Z",
  "status": "CODING",
  "url": "https://www.hackerearth.com/challenges/hackathon/microsoft-virtual-hackathon-2022/",
}
Object {
  "duration": "7200.0",
  "end_time": "2022-06-01T13:00:00.000Z",
  "in_24_hours": "Yes",
  "name": "TCO22 Algorithm Round 2B",
  "site": "TopCoder",
  "start_time": "2022-06-01T11:00:00.000Z",
  "status": "BEFORE",
  "url": "https://www.topcoder.com/challenges",
}
Object {
  "duration": "10800",
  "end_time": "2022-06-01 17:30:00 UTC",
  "in_24_hours": "Yes",
  "name": "CodeChef Starters 41",
  "site": "CodeChef",
  "start_time": "2022-06-01 14:30:00 UTC",
  "status": "BEFORE",
  "url": "https://www.codechef.com/START41",
}

I want to display details about only those contests whose status value is "CODING", in the flatlist.

App.js (The ContestItem is just an item component showing details about each contest)

export default function App() {

    const [loading, setLoading] = useState(true)
    const [originalData, setOriginalData] = useState([])

    const fetchAllContests = async () => {
        try {
            const response = await fetch(`https://kontests.net/api/v1/all`)
            const json = await response.json()
            setOriginalData([...originalData, ...json])
        } catch (e) {
            console.log(e)
            setError(e)
        } finally {
            setLoading(false)
        }
    }

    useEffect(() => {
        fetchAllContests()
    }, [])

    return (
        ~~~~~~~~~~~~~~~~~~~~~~~~~~
            <View style={styles.innerContainer}>
                {loading ? <ActivityIndicator size="large" color={Colors.RED}/> : (
                    <FlatList
                        style={styles.flatList}
                        data={originalData}
                        keyExtractor={({id}) => keyGenerator()}
                        renderItem={({item}) => (
                            <ContestItem
                                item={item}
                            />
                        )}
                    />
                )}
            </View>
        </View>
    )
}

How to achieve this?

CodePudding user response：

You can filter the originalData on status === "CODING".

<FlatList
   style={styles.flatList}
   data={originalData.filter(contest => contest.status === "CODING")}

Assuming, API result is an array of objects.