Display api value by using React Native with typescript

JavaScript
1

Hello,

I want to display this json data (an API) shown below on React Native app with typescript.


  {
  "winnerClubs": {
    "club-1": {
      "id": "club-1",
      "name": {
        "en-GB": "Arsenal",
        "fr-FR": "Arsenal"
      },
      "nickName": "Gunners"
    },
    "club-2": {
      
      "id": "club-2",
      "name": {
        "en-GB": "Liverpool",
        "fr-FR": "Liverpool"
      },
      "nickName": "the Reds"
    },
    "club-3": {
      
      "id": "club-3",
      "name": {
        "en-GB": "Chelsea",
        "fr-FR": "Chelsea"
      },
      "nickName": "the Blues"
    },
    "club-4": {
      
      "id": "club-4",
      "name": {
        "en-GB": "Man United",
        "fr-FR": "Man United"
      },
      "nickName": "the Red Devils"
    },
    "club-5": {
      
      "id": "club-5",
      "name": {
        "en-GB": "Everton",
        "fr-FR": "Everton"
      },
      "nickName": "the Toffees"
    },
    "club-6": {
      
      "id": "club-6",
      "name": {
        "en-GB": "Tottenham Hotspurs",
        "fr-FR": "Tottenham Hotspurs"
      },
      "nickName": "Spurs"
    },
    "club-7": {
      
      "id": "club-7",
      "name": {
        "en-GB": "Man City",
        "fr-FR": "Man City"
      },
      "nickName": "the Citizens"
    },
    "club-8": {
      
      "id": "club-8",
      "name": {
        "en-GB": "Sunderland",
        "fr-FR": "Sunderland"
      },
      "nickName": "the Black Cats"
    },
    "club-9": {
      
      "id": "club-9",
      "name": {
        "en-GB": "Leicester City",
        "fr-FR": "Leicester City"
      },
      "nickName": "the Foxes"
    },
    "club-10": {
      
      "id": "club-10",
      "name": {
        "en-GB": "Newcastle",
        "fr-FR": "Newcastle"
      },
      "nickName": "the Magpies"
    }
}
}

First I changed this json data (normally I am using the url of api) to interfaces like this (correct me if I make wrong):

declare module namespace {

    export interface Name {
        en-GB: string;
        fr-FR: string;
    }

    export interface Club1 {
        id: string;
        name: Name;
        nickName: string;
    }

    export interface Name2 {
        en-GB: string;
        fr-FR: string;
    }

    export interface Club2 {
        id: string;
        name: Name2;
        nickName: string;
    }

    export interface Name3 {
        en-GB: string;
        fr-FR: string;
    }

    export interface Club3 {
        id: string;
        name: Name3;
        nickName: string;
    }

    export interface Name4 {
        en-GB: string;
        fr-FR: string;
    }

    export interface Club4 {
        id: string;
        name: Name4;
        nickName: string;
    }

    export interface Name5 {
        en-GB: string;
        fr-FR: string;
    }

    export interface Club5 {
        id: string;
        name: Name5;
        nickName: string;
    }

    export interface Name6 {
        en-GB: string;
        fr-FR: string;
    }

    export interface Club6 {
        id: string;
        name: Name6;
        nickName: string;
    }

    export interface Name7 {
        en-GB: string;
        fr-FR: string;
    }

    export interface Club7 {
        id: string;
        name: Name7;
        nickName: string;
    }

    export interface Name8 {
        en-GB: string;
        fr-FR: string;
    }

    export interface Club8 {
        id: string;
        name: Name8;
        nickName: string;
    }

    export interface Name9 {
        en-GB: string;
        fr-FR: string;
    }

    export interface Club9 {
        id: string;
        name: Name9;
        nickName: string;
    }

    export interface Name10 {
        en-GB: string;
        fr-FR: string;
    }

    export interface Club10 {
        id: string;
        name: Name10;
        nickName: string;
    }

    export interface WinnerClubs {
        club-1: Club1;
        club-2: Club2;
        club-3: Club3;
        club-4: Club4;
        club-5: Club5;
        club-6: Club6;
        club-7: Club7;
        club-8: Club8;
        club-9: Club9;
        club-10: Club10;
    }

    export interface RootObject {
        winnerClubs: WinnerClubs;
    }

}

My goal is to display the name of the clubs. It is my first time to try typescript in React Native. Can anyone give me any suggestion or help please?
Thanks

2

Can you do it in JS? If you are new to TS, it might be best to write it out in JS first.

3

@kevinSmith Thank you for your response. I can in Js however, I want to do it with typescript.
Do you have any suggestion or help on it? Thanks

4

Right. But I am suggesting, as a learning tool, to write it out in JS first and then add in the TS.

All I see are a bunch of interfaces (which I think could be much more generic, less redundant) but I don’t see any attempt at code. Are you asking us to write the meat of the code for you?

5

@kevinSmith No no… I don’t have any knife to cut the meat lol…
I tried like this but I couldn’t arrive to the exact answer:

import {winnerClubs, Name} from './interfaces/interfaces';

const [teams, setTeams] = useState<winnerClubs[]>([]);

useEffect(() => {
    axios
    .get<winnerClubs[]>('https://api.football') /*api not functional... just an example*/
    .then((response: AxiosResponse) => {
      
      setTeams(response.data);
    })

  }, []);

const renderItem: ListRenderItem<Name> = ({item}) => {
    return (
      <View>
        <Text>
        {item.name}
        </Text>
      </View>
    )
  };

return (
    <SafeAreaView style={styles.container}>
      {
        teams? (
          <FlatList 
                    data={teams.winnerClubs}
                    renderItem={renderItem}
                  />
        ) : (
          <ActivityIndicator size="large" color="black" />
          
        )
      }
        
    </SafeAreaView>
  );
6

So, does this code work as JS code?

At that point, I think the best thing is to just start with working code and add in TS annotations, testing as you go. I you run into an issue, as a very specific question. Asking, “can someone teach me TS?” or “can someone write my TS for me?” is not going to get good responses. Saying, “Can someone help with using an interface with destructured parameters? I’ve researched it and this is what I’ve tried, but it’s not working.” That is something actionable for us.

7

I am trying to ask a suggestion or a help regards to my code that I tried. Anyways I accepted your suggestion about how to ask a question.
When I come to the point, I didn’t test in JS.
If you see in the json, inside “winnerClubs” object, all of first lever object keys (for example, ‘club-1’, ‘club-2’, ‘club-3’, etc ) are different. Can you give me an idea how to access them? even in JS
Thanks

8

So, you don’t have working JS code? That would absolutely, 100% be my first step. I would not do anything before I got that to work.

If you see in the json, inside “winnerClubs” object, all of first lever object keys (for example, ‘club-1’, ‘club-2’, ‘club-3’, etc ) are different.

Right, but rather than ‘club-1’, why not have an array?

9

Ok I will test it on JS.
Thanks

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.