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