How can I make complex data suitable for flatlist?

Question

I'm using the api at https://rapidapi.com/omgvamp/api/hearthstone?endpoint=5525c4a8e4b01d538895c588. (AllCards Endpoint)

I'm trying to print the mechanics using flatlist but failed. How should I send the data to the flatlist?

Note: Some data are missing or have more than one mechanics.

Sample Data:

{
    "Basic": [
        {
            "cardId": "GAME_004",
            "dbfId": "1740",
            "name": "AFK",
            "cardSet": "Basic",
            "type": "Enchantment",
            "text": "Your turns are shorter.",
            "playerClass": "Neutral",
            "locale": "enUS",
             "mechanics": [
                            {
                               "name": "OneTurnEffect"
                            }
                          ]
        }, 
        {
            "cardId": "CS2_041e",
            "dbfId": "1853",
            "name": "Ancestral Infusion",
            "cardSet": "Basic",
            "type": "Enchantment",
            "text": "Taunt.",
            "playerClass": "Shaman",
            "locale": "enUS",
            "mechanics": [
                {
                    "name": "Taunt", "name": "Fire",
                }
            ]
        },
        {
            "cardId": "HERO_09",
            "dbfId": "813",
            "name": "Anduin Wrynn",
            "cardSet": "Basic",
            "type": "Hero",
            "faction": "Neutral",
            "rarity": "Free",
            "health": 30,
            "collectible": true,
            "playerClass": "Priest",
            "locale": "enUS"
        }, ] }

Answer 1

Currently, your data is in JSON format you have to make it a javascript object and pass the Basic array of your data to the Flatlist.

 import React from "react";
    import {
      SafeAreaView,
      View,
      FlatList,
      StyleSheet,
      Text,
      StatusBar,
    } from "react-native";
    
    const data = {
      Basic: [
        {
          cardId: "GAME_004",
          dbfId: "1740",
          name: "AFK",
          cardSet: "Basic",
          type: "Enchantment",
          text: "Your turns are shorter.",
          playerClass: "Neutral",
          locale: "enUS",
          mechanics: [
            {
              name: "OneTurnEffect",
            },
          ],
        },
        {
          cardId: "CS2_041e",
          dbfId: "1853",
          name: "Ancestral Infusion",
          cardSet: "Basic",
          type: "Enchantment",
          text: "Taunt.",
          playerClass: "Shaman",
          locale: "enUS",
          mechanics: [
            {
              name: "Taunt",
              name: "Fire",
            },
          ],
        },
        {
          cardId: "HERO_09",
          dbfId: "813",
          name: "Anduin Wrynn",
          cardSet: "Basic",
          type: "Hero",
          faction: "Neutral",
          rarity: "Free",
          health: 30,
          collectible: true,
          playerClass: "Priest",
          locale: "enUS",
        },
      ],
    };
    
    const Item = (props) => {
      const {
        cardId,
        dbfId,
        name,
        cardSet,
        type,
        faction,
        rarity,
        health,
        collectible,
        playerClass,
        locale,
        mechanics,
      } = props;
      return (
        <View style={styles.item}>
          <Text style={styles.title}>{cardId}</Text>
          <Text style={styles.title}>{dbfId}</Text>
          <Text style={styles.title}>{name}</Text>
          <Text style={styles.title}>{cardSet}</Text>
          <Text style={styles.title}>{type}</Text>
          <Text style={styles.title}>{faction}</Text>
          <Text style={styles.title}>{rarity}</Text>
          <Text style={styles.title}>{health}</Text>
          <Text style={styles.title}>{collectible}</Text>
          <Text style={styles.title}>{playerClass}</Text>
          <Text style={styles.title}>{locale}</Text>
          {mechanics && mechanics.map((item) => (
            <Text style={styles.title}>{item.name}</Text>
          ))}
        </View>
      );
    };
    
    const App = () => {
      const renderItem = ({ item }) => <Item {...item} />;
    
      return (
        <SafeAreaView style={styles.container}>
          <FlatList
            data={data.Basic}
            renderItem={renderItem}
            keyExtractor={(item) => item.id}
          />
        </SafeAreaView>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
      },
      item: {
        backgroundColor: "#f9c2ff",
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
      },
      title: {
        fontSize: 32,
      },
    });
    
    export default App;