Post Json with axios to Strapi

Question

I have a backend strapi-service and i try to post a JSON to it with axios. It creates the new Content with an ID, but the JSON is empty. As a response it returns null.

I am using react-js. My Code:

import axios from 'axios';


function App() {
const apiUrl = 'http://localhost:1338/api/participants'

const posting = async () => {
    await axios.post(apiUrl,{
        "data": {
          "startStudyTime": 0,
          "endStudyTime": 0,
          "objectsPressed": [{}],
          "searchHistory": [{}],
          "connection": {
              "Device": "",
              "Browser": "",
              "OS": ""    
          },
          "finished": false,
          "canceled": false
        }
      }, { headers: { 'Content-Type': 'application/json' } })
            .then( response =>{
              console.log('response.data:', response.data)
              console.log('response.data.data:', response.data.data)
              console.log('response.data.data.id:', response.data.data.id)
            })
            }

return (   
      <div className="App">       
        <button onClick={posting}>Submit</button>        
      </div>
  );
}

export default App

The code runs and when I press on the submit-button, I'll always get a log, where the data has a diffrent id, but the participantLoggingData remains null, as the postman log below.

So i tried to use postman to see if anything is wrong with axios or sth: I used the "post" call, put the Json object into the body, set the body to raw and JSON and got the following:

{
    "data": {
        "id": 27,
        "attributes": {
            "participantLoggingData": null,
            "createdAt": "2022-11-07T00:23:41.759Z",
            "updatedAt": "2022-11-07T00:23:41.759Z",
            "publishedAt": "2022-11-07T00:23:41.759Z"
        }
    },
    "meta": {}
}

and the json is stil null, idk...

I tried stuff like JSON.stringify() this gave me a 400 error and i tried to store the json into a container, so i can all sth like await axios.post(apiUrl, data,{ headers: { 'Content-Type': 'application/json' } }), but nothing worked.

So I looked up the strapi documentation and i couldn't find any diffrence(syntax-wise), so i guess my strapi isn't set up 100% correct. If I create a new contentType with only a Json it has the same issue. Is there a fix for it? My strapi configs: Under Settings/Roles/Public/Participant, all boxes are checked, so basicly everyone should be able to create, find, update and delete stuff.

My ContentType is called Participant with a JSON named "participantLoggingData"

I also have tried to use the axios.put call, but this doesnt change the object, it still remains empty :/

Answer 1

For json field participantLoggingData in your post request you need to send data like:

{
  "data": {
    "participantLoggingData": {
          "startStudyTime": 0,
          "endStudyTime": 0,
          "objectsPressed": [{}],
          "searchHistory": [{}],
          "connection": {
              "Device": "",
              "Browser": "",
              "OS": ""    
          },
          "finished": false,
          "canceled": false
        }
  }
}

You cannot directly pass data in data key in this case.