Creating a Related Entry in strapi v4: A Step-by-Step Guide

Whenever I try to add a new record in my Collection-Type, all the field values are successfully added to the new entry except for the value in the field with a Relation type.

For instance, in my event Collection-Type, I have fields like name, performers, venue, address, date, time, description, and user.

The 'user' field is of Relation type (Relation with User (from:users-permission)).

All other fields are Text, DateTime, RichText, etc.

After receiving data from the form submission, the object looks similar to this:

var values = {
        name: 'namevalue',
        performers: 'whatever',
        venue: 'whatever',
        address: 'xyz address',
        date: '2022-12-15',
        time: '10:00 PM',
        description: 'Description of the Event',
    }

I simply update the 'values' object as follows:

var values = {
            name: 'namevalue',
            performers: 'whatever',
            venue: 'whatever',
            address: 'xyz address',
            date: '2022-12-15',
            time: '10:00 PM',
            description: 'Description of the Event',
            user:1
        }

PLEASE NOTE the user:1 that has been added to the object above.

However, after submitting these values to the appropriate endpoint:

const res = await fetch(`${API_URL}/api/events`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Authorization: `Bearer ${token}`,
            },
            body: JSON.stringify({
                data: values,
            }),
        })

In the Strapi backend, the 'user' field and its value do not appear at all. Here's an example of what I receive:

{
  data: {
    name: '13',
    performers: '13',
    venue: '13',
    address: '13',
    date: '2022-06-10',
    time: '8:00 PM',
    description: '13'
  },
  files: undefined
}

As seen, all the other data is received and saved into the new Entry except for the desired Relation value. What am I overlooking here and how can I resolve this issue?

Answer №1

To access the feature, navigate to your settings and click on user-permission settings. From there, go to authenticated and then user permission. Make sure to enable both the find and findOne scopes under the user section for it to function properly.

Answer №2

My suggestion is to include the query parameter ?populate=* in the URL.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a cookie within a jQuery dialog box and display the chosen value on the webpage following submission, alongside

I am creating a webpage where users are required to input their postcode in order to search for factories nearby. To achieve this, I have implemented a jQuery modal dialog that prompts users to enter their postcode and click submit. Once submitted, a cook ...

Stop or terminate all ongoing requests in AngularJS

When switching routes, I want to prevent any pending requests from the previous route in order to avoid issues where responses from the previous route interfere with data on the current route. This sometimes happens when responses from the previous route t ...

Is it feasible for JSON.stringify to maintain functions in its serialization?

Consider this item: x = { "key1": "xxx", "key2": function(){return this.key1} } Suppose I execute the following code: y = JSON.parse( JSON.stringify(x) ); After running the above code, y will contain { "key1": "xxx" }. Is there a way to include funct ...

Non-reactive arrays in Vue.js

I am facing an issue. Here is the problem: data: { tracks: [] } The tracks array will contain a complex object. I want to achieve reactivity when assigning a new value to tracks nested object, but I do not need deep reactivity for the object. ...

Merge topics together in RxJS like zip

Is it possible to create an observable that combines two subjects in a unique way, different from the zip function? The goal is to combine two subjects so that when both have emitted values, the latest of their values is emitted. Then, after both emit at ...

Error occurring when attempting to pass messages within an iframe on a sandboxed page in a Chrome extension

Whenever I try to utilize my popup page for a chromium extension as a conduit for communication between the background page and a page shown within an iframe on the popup, I encounter the following error. I required a sandboxed environment to execute Vue.j ...

Error message: "The source and destination cannot be identical in the AWS Amplify React JS Next application."

I am facing an issue while attempting to deploy my Reactjs Next Application on AWS Amplify as it displays an error during the build process. Here is a snippet of my amplify.yml configuration for pre-build and build: version: 1 frontend: phases: preB ...

Error Checking in AngularJS Form Submission

According to my form.json file, I have a form that needs validation and a simulated submission. Firstly, I need to address this issue: fnPtr is not a function Next, I want to submit the form to a mocked API endpoint that will return true or false. Can I ...

Which language should I focus on mastering in order to create a script for my Epson receipt printer? (Check out the manual for reference)

Printer Model: TM-T88V User Manual: Receipt-marker Web template for the printer: (Provided by Epson) I'm completely new to computer languages and have been trying to understand how to print receipts. I've researched XML, HTML, CSS, and Jav ...

Having trouble with ui-sref functionality within a Bootstrap dropdown menu

In the header.html file, I have the following angular code: <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> &l ...

Always ensure that the state is correctly updated before displaying any information in a React Modal component

I am currently utilizing a combination of Material-UI components, the useState hook, and the NextJS framework. Within my render method, I am mapping over someData where each element has the following structure: someData[i] : { "id": number, ...

Navigating through objects to retrieve internal object values

I currently have a collection of objects stored in my program. const objs = { "1":{ "name":"Candice", "Classes": [00029,00023,00032,000222], "id":0002918 }, "2":{ "name":"Clark", "classes" ...

Looking to convert this single object into an array of objects within VueJS

So, I've encountered a bit of a pickle with the data from an endpoint that I need to format for a menu project I'm working on. It's all jumbled up and not making much sense right now. Any assistance would be greatly appreciated! This is the ...

Can CSS actually generate accurate inches?

Can you accurately set the width of an element, like a div, in inches and expect it to maintain that width across different devices? Or will it simply scale at a ratio like 1in = 96px? Edit: Try using CSS to set an element's width in inches and then ...

What is the process for obtaining Style.css, additional CSS, and JavaScript files from a live single page website?

I am currently facing a challenge with a live single page website where I need to make some fixes. Unfortunately, I am unable to access the Style.css file, along with other css and javascript files. Although I managed to save the html file by using Ctrl+s, ...

In JavaScript, you can update the class named "active" to become the active attribute for a link

My current menu uses superfish, but it lacks an active class to highlight the current page tab. To rectify this, I implemented the following JavaScript code. <script type="text/javascript"> var path = window.location.pathname.split('/'); p ...

Generate a dropdown menu with dynamic options populated from an API by adding an input type select element dynamically

Greetings! I am working on designing a decision tree that dynamically generates options based on user selections and API responses. When a user chooses a reason option, the corresponding reasons are fetched from the API and displayed in a select dropdown. ...

Is there a way to refresh autocomplete/autofill after form submission with a custom JavaScript function?

I've developed a Vue application that includes a form. Once the user clicks on submit, an Ajax request is made using Axios through a JavaScript function. The data being sent is a custom JSON object that I have constructed by combining the information ...

What benefits does NewRelic offer?

We are looking for a way to monitor events within our application and send the data to a monitoring server such as NewRelic. Our goal is to set up alerts based on this custom data. For instance, we would like to receive an alert if an event does not occur ...

An unconventional web address was created when utilizing window.location.hostname

I've encountered an issue while trying to concatenate a URL, resulting in unexpected output. Below you'll find the code I tested along with its results. As I am currently testing on a local server, the desired request URL is http://127.0.0.1:800 ...