I'm currently developing a project using Node, Express, and React, and I'm required to access an API provided by RapidAPI. At the moment, the output is displaying in JSON format only. What steps should I follow to retrieve the data from my Node/Express server and present it appropriately on the HTML frontend?
Here is my server.js file:
const PORT = 8000;
const express = require(‘express’);
const app = express();
const cors = require(‘cors’);
require(‘dotenv’).config();
const axios = require(‘axios’).default;
app.use(cors());
app.get(‘/players’, async (req, res) => {
const options = {
method: ‘GET’,
url: ‘https://api-football-v1.p.rapidapi.com/v3/players’,
params: {
league: ‘39’,
season: ‘2020’,
team: ‘33’
},
headers: {
‘X-RapidAPI-Key’: process.env.RAPID_API_KEY,
‘X-RapidAPI-Host’: ‘api-football-v1.p.rapidapi.com’
}
};
try {
const response = await axios.request(options);
console.log(response.data);
res.json(response.data);
} catch (error) {
console.error(error);
}
});
app.listen(PORT, () => {
console.log('Server listening on port ’ + PORT);
});
This is my App.js file:
import React from ‘react’;
function App() {
return (
</div>
);
}
export default App;
To display RapidAPI responses correctly in your React frontend, you'll need to follow several steps to fetch and render the data. Firstly, ensure that your Node/Express server is working correctly, which it seems to be from your server.js code. Next, you need to fetch this data in your React component and format it for display.
Here's how you can enhance your App.js to achieve this:
import React, { useEffect, useState } from 'react';
function App() {
const [players, setPlayers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('http://localhost:8000/players')
.then(response => response.json())
.then(data => {
setPlayers(data.response || []);
setLoading(false);
})
.catch(error => console.log(error));
}, []);
if (loading) {
return Loading...
;
}
return (
Player List
{players.map(player => (
-
{player.player.name} - {player.statistics[0].team.name}
))}
);
}
export default App;
Here’s a breakdown of what’s happening in this code snippet:
We're using the useState hook to manage the players' data and a loading state to manage the rendering logic while the data is being fetched.
The useEffect hook ensures that the data is fetched when the component is mounted. This sends a request to your Node/Express server to get the players' data.
We're assuming that the response data structure is similar to what the RapidAPI would return, and mapping through the 'response' or similar field in your data, rendering a list of players.
Adjust the data fields like player.player.name and player.statistics[0].team.name based on the actual JSON structure returned by the API.
Make sure your Express server is running on the same origin to avoid any CORS issues. If you're testing locally, replace localhost:8000 with the relevant base URL.