I’m working on a full stack beginner project and did my backend in Springboot and the post request to add players to a team requests an arraylist of playerdto objects as it’s input, when testing through postman the json request usually looks like [{},{}] with playername and playerposition being the inputs inside the {} but I don’t know how to replicate this in my frontend through javascript, this is my javascript code as of now, you can skip through the other functions and can focus on the addplayer function alone I believe.
import React, { useState, useEffect } from "react";
import axios from "axios";
import './TeamDetailsPage.css'; // Import CSS file
const TeamDetailsPage = () => {
const [teamdetails, setTeamDetails] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [showForm, setShowForm] = useState(false);
const [teamName, setTeamName] = useState('');
const [manager, setManager] = useState('');
const [numPlayers, setNumPlayers] = useState(0); // Track the number of players to add
const [playerInputs, setPlayerInputs] = useState([]); // Track player input fields
const [showPlayerForm, setShowPlayerForm] = useState({});
useEffect(() => {
axios.get('http://localhost:8080/api/teamdetails/all')
.then(response => {
setTeamDetails(response.data);
setLoading(false);
})
.catch(error => {
console.error('Error fetching team details:', error);
setError(error);
setLoading(false);
});
}, []);
const handleEditTeam = (teamDetailId) => {
setTeamDetails(prevTeamDetails => (
prevTeamDetails.map(team => (
team.id === teamDetailId ? { ...team, editing: true } : team
))
));
};
const handleUpdateTeam = (teamDetailId, updatedTeamDetails) => {
axios.put(`http://localhost:8080/api/teamdetails/${teamDetailId}/update`, updatedTeamDetails)
.then(response => {
console.log('Team details updated:', response.data); // Log the updated data
setTeamDetails(prevTeamDetails => (
prevTeamDetails.map(team => (
team.id === teamDetailId ? { ...response.data, editing: false } : team
))
));
})
.catch(error => {
console.error('Error updating team details:', error);
});
};
const handleCreateTeam = () => {
setShowForm(true);
};
const handleSubmit = () => {
const newTeam = {
teamName: teamName,
manager: manager,
players: playerInputs.map(playerInput => ({
playerName: playerInput.playerName,
playerPosition: playerInput.playerPosition
}))
};
axios.post('http://localhost:8080/api/teamdetails/create', newTeam)
.then(response => {
console.log('New team created:', response.data);
setShowForm(false); // Close the form after submitting
// Reload the team details after creating the new team
axios.get('http://localhost:8080/api/teamdetails/all')
.then(response => {
setTeamDetails(response.data);
})
.catch(error => {
console.error('Error fetching team details:', error);
setError(error);
});
})
.catch(error => {
console.error('Error creating new team:', error);
});
};
const handleDeleteTeam = (teamDetailId) => {
axios.delete(`http://localhost:8080/api/teamdetails/${teamDetailId}/delete`)
.then(() => {
console.log('Team deleted:', teamDetailId);
// Remove the deleted team from the list
setTeamDetails(prevTeamDetails => (
prevTeamDetails.filter(team => team.id !== teamDetailId)
));
})
.catch(error => {
console.error('Error deleting team:', error);
});
};
const handleTogglePlayerForm = (teamId) => {
setShowPlayerForm(prevState => ({
...prevState,
[teamId]: !prevState[teamId]
}));
// Reset input fields when opening the form
setPlayerInputs([]);
};
const handleAddPlayer = () => {
// Create input fields for player names and positions based on the number of players
const newPlayerInputs = Array.from({ length: numPlayers }, (_, index) => ({
playerName: '',
playerPosition: '',
id: index // Add unique ID for tracking purposes
}));
setPlayerInputs(newPlayerInputs);
};
const handleRemovePlayer = (id) => {
// Remove player input field based on its unique ID
const updatedPlayerInputs = playerInputs.filter(playerInput => playerInput.id !== id);
setPlayerInputs(updatedPlayerInputs);
};
const handlePlayerNameChange = (e, id) => {
// Update player name based on its unique ID
const updatedPlayerInputs = playerInputs.map(playerInput => {
if (playerInput.id === id) {
return { ...playerInput, playerName: e.target.value };
}
return playerInput;
});
setPlayerInputs(updatedPlayerInputs);
};
const handlePlayerPositionChange = (e, id) => {
// Update player position based on its unique ID
const updatedPlayerInputs = playerInputs.map(playerInput => {
if (playerInput.id === id) {
return { ...playerInput, playerPosition: e.target.value };
}
return playerInput;
});
setPlayerInputs(updatedPlayerInputs);
};
const handleAddPlayerToTeam = (teamId) => {
const players = playerInputs.map(playerInput => ({
playerName: playerInput.playerName,
playerPosition: playerInput.playerPosition
}));
axios.post(`http://localhost:8080/api/teamdetails/${teamId}/addplayers`, {
players: players
})
.then(response => {
console.log('Players added to team:', response.data);
// Optionally, update the state to reflect the change
// For example, refetch team details
axios.get(`http://localhost:8080/api/teamdetails/all`)
.then(response => {
setTeamDetails(response.data);
})
.catch(error => {
console.error('Error fetching team details:', error);
setError(error);
});
})
.catch(error => {
console.error('Error adding players to team:', error);
});
};
return (
<div className="team-details-container">
<div className="team-topbar">
<h1>Teams</h1>
<button className="create-button" onClick={handleCreateTeam}>Create Team</button>
</div>
{showForm && (
<div className="team-container">
<div className="edit-form">
{/* Input fields for creating team details */}
<input
type="text"
value={teamName}
onChange={(e) => setTeamName(e.target.value)}
placeholder="Enter team name"
/>
<input
type="text"
value={manager}
onChange={(e) => setManager(e.target.value)}
placeholder="Enter manager name"
/>
{/* Input field for number of players */}
<input
type="number"
value={numPlayers}
onChange={(e) => setNumPlayers(e.target.value)}
placeholder="Enter number of players"
/>
{/* Add button to dynamically generate player input fields */}
<button onClick={handleAddPlayer}>Add Player</button>
{/* Display input fields for player names and positions */}
{playerInputs.map((playerInput) => (
<div key={playerInput.id}>
<input
type="text"
value={playerInput.playerName}
onChange={(e) => handlePlayerNameChange(e, playerInput.id)}
placeholder="Enter player name"
/>
<input
type="text"
value={playerInput.playerPosition}
onChange={(e) => handlePlayerPositionChange(e, playerInput.id)}
placeholder="Enter player position"
/>
<button onClick={() => handleRemovePlayer(playerInput.id)}>Remove</button>
</div>
))}
{/* Submit button to add the team */}
<button className="submit-button" onClick={handleSubmit}>Submit</button>
</div>
</div>
)}
{loading ? (
<p>Loading...</p>
) : error ? (
<p>Error: {error.message}</p>
) : (
teamdetails.map(team => (
<div key={team.id} className="team-container">
{team.editing ? (
<div className="edit-form">
{/* Input fields for editing team details */}
<input
type="text"
value={team.teamName}
onChange={(e) => setTeamDetails(prevTeamDetails => (
prevTeamDetails.map(item => (
item.id === team.id ? { ...item, teamName: e.target.value } : item
))
))}
/>
{/* Add similar input fields for manager, players, etc. */}
<input
type="text"
value={team.manager}
onChange={(e) => setTeamDetails(prevTeamDetails => (
prevTeamDetails.map(item => (
item.id === team.id ? { ...item, manager: e.target.value } : item
))
))}
/>
{/* Add input fields for player names and positions */}
<button className="update-button" onClick={() => handleUpdateTeam(team.id, team)}>Update</button>
</div>
) : (
<>
<h2 className="team-name">{team.teamName}</h2>
<p className="manager">Manager: {team.manager}</p>
{/* Display player details */}
<ul className="players-list">
{team.players.map(player => (
<li key={player.id} className="player">
{player.playerName} - {player.playerPosition}
</li>
))}
</ul>
<button className="edit-button" onClick={() => handleEditTeam(team.id)}>Edit</button>
<button className="delete-button" onClick={() => handleDeleteTeam(team.id)}>Delete</button>
{/* Add button to toggle player form */}
<button className="add-player-button" onClick={() => handleTogglePlayerForm(team.id)}>Add Player</button>
{/* Add player form */}
{showPlayerForm[team.id] && (
<form onSubmit={(e) => { e.preventDefault(); handleAddPlayerToTeam(team.id); }}>
{playerInputs.map((playerInput, index) => (
<div key={index}>
<input
type="text"
value={playerInput.playerName}
onChange={(e) => handlePlayerNameChange(e, playerInput.id)}
placeholder="Enter player name"
/>
<input
type="text"
value={playerInput.playerPosition}
onChange={(e) => handlePlayerPositionChange(e, playerInput.id)}
placeholder="Enter player position"
/>
</div>
))}
<button type="submit">Submit</button>
</form>
)}
</>
)}
</div>
))
)}
</div>
);
};
export default TeamDetailsPage;
the error I recieve is:
JSON parse error: Cannot deserialize value of type `java.util.ArrayList<com.footballleague.footballleague.dto.PlayerDto>` from Object value (token `JsonToken.START_OBJECT`)]
this is my backend code:
service impl:
@Override
public TeamDetails addPlayersToTeam(Long teamId, List<PlayerDto> playerDtoList) {
TeamDetails team = teamDetailsRepository.findById(teamId)
.orElseThrow(() -> new ResourceNotFoundException("Team not found with id: " + teamId));
List<Player> players = new ArrayList<>();
for (PlayerDto playerDto : playerDtoList) {
Player player = PlayerMapper.mapToPlayer(playerDto);
player.setTeamDetails(team); // Set the team for each player
players.add(player);
}
team.getPlayers().addAll(players); // Ensure bidirectional relationship is managed
team = teamDetailsRepository.save(team);//line 45
return team;
}
controller:
@RequestMapping("/api/teamdetails")
@PostMapping("/{teamId}/addplayers")
public ResponseEntity<TeamDetailsDto> addPlayersToTeam(@PathVariable("teamId") Long teamId, @RequestBody List<PlayerDto> playerDtoList) {
TeamDetails updatedTeamDetails = teamDetailsService.addPlayersToTeam(teamId, playerDtoList);//line 30
TeamDetailsDto updatedTeamDetailsDto = TeamDetailsMapper.mapToTeamDetailsDto(updatedTeamDetails);
return new ResponseEntity<>(updatedTeamDetailsDto, HttpStatus.OK);
}