Hello!
I am trying to create a profile for my users by them filling in this form and sending it to strapi.
And of course I want to establish a connection between User and Profile CT.
When i send a post request through Postman to check the endpoint and the request body, I am able to sucsessfully create a profile with a relation with the user established.
But when I do this through code, I get: POST http://localhost:1337/api/profiles?populate=* 400 (Bad Request)
Should I add a controller? I don’t really understand how they work, and what exactly I should do.
Here is what I have so far:
document.addEventListener('DOMContentLoaded', function () {
const profileForm = document.getElementById('profileForm');
if (profileForm) {
console.log('Profile form found in the DOM.');
profileForm.addEventListener('submit', function (event) {
event.preventDefault(); // Prevent default form submission
const userId = localStorage.getItem('user_id');
fetch(`http://localhost:1337/api/users/${userId}`, {
method: 'GET',
headers: {
'Authorization': 'Bearer 07435bafa8d1301b8f5745d3009745978861bc2f1e2b59e4572400415d999c5f5d05b83844acbcba7b06e1c30253895a3868bb7b36d2f660d651c080a502b731b9b43c07b4b0b270d996591f3911fc145d100ceb139ca11e62810434211adc830e2b45b7ab6e4adcdef958738625574c614b3f923dfcca4f23d749d02d16970c',
'Content-Type': 'application/json'
}
})
.then(response => {
if (!response.ok) {
throw new Error('Failed to fetch user data');
}
return response.json();
})
.then(userData => {
console.log('User data fetched successfully:', userData);
const username = userData.username;
const email = userData.email;
const requestBody = {
data: {
profilePicture: profileForm.querySelector('#profilePicture').value,
firstName: profileForm.querySelector('#firstName').value,
lastName: profileForm.querySelector('#lastName').value,
bio: profileForm.querySelector('#bio').value,
location: profileForm.querySelector('#location').value,
username: username,
email: email,
user: {
"id": userId
}
}
};
console.log('Request body constructed:', requestBody);
fetch(`http://localhost:1337/api/profiles?populate=*`, {
method: 'POST',
headers: {
'Authorization': 'Bearer 07435bafa8d1301b8f5745d3009745978861bc2f1e2b59e4572400415d999c5f5d05b83844acbcba7b06e1c30253895a3868bb7b36d2f660d651c080a502b731b9b43c07b4b0b270d996591f3911fc145d100ceb139ca11e62810434211adc830e2b45b7ab6e4adcdef958738625574c614b3f923dfcca4f23d749d02d16970c',
'Content-Type': 'application/json'
},
body: JSON.stringify(requestBody)
})
.then(response => response.json())
.then(data => {
if (!data.errors) {
console.log('Profile created successfully:', data.data);
// Handle successful profile creation here (e.g., display success message)
} else {
console.error('Error creating profile:', data.errors);
// Handle profile creation errors here (e.g., display error message)
}
})
.catch(error => {
console.error('Error creating profile:', error);
// Handle network or other errors here
});
})
.catch(error => {
console.error('Error fetching user data:', error);
// Handle error here
});
});
} else {
console.error('Profile form element not found in the DOM.');
}
});
and here is the controller profile.js:
'use strict';
const { createCoreController } = require('@strapi/strapi').factories;
module.exports = createCoreController('api::profile.profile', {
beforeCreate: async (ctx) => {
// Access user data from the request body
const userId = ctx.request.body.data.user.id;
if (!userId) {
ctx.throw(400, 'Missing user ID in request body');
}
ctx.request.body.data.user = userId;
},
});
This is what I get in the browser console:
post_profile.js:5 Profile form found in the DOM.
favicon.ico:1
GET http://localhost:8000/pages/assets/img/favicon.ico 404 (Not Found)
post_profile.js:26 User data fetched successfully: {id: 8, username: ‘victoria.chiciuc14’, email: ‘victoria.chiciuc14@gmail.com’, provider: ‘auth0’, confirmed: true, …}
post_profile.js:46 Request body constructed: {data: {…}}
post_profile.js:48
POST http://localhost:1337/api/profiles?populate=* 400 (Bad Request)
(anonymous) @ post_profile.js:48
Promise.then (async)
(anonymous) @ post_profile.js:25
post_profile.js:59 Profile created successfully: null