How to create composite Json object working with Typicode Json Server

Question

I am working in a Web Application using jQuery and I am confused about the JSON format. For the server I am using a restful Json Server.

The problem is that don't know what is the problem. The error is that the Json format that i post to the server (HTTP POST with Ajax) seems to be incorrect. I will try to explain this step by step.

The initial situation of the Json Server (at http://localhost:3000/db) is:

{
   "userRecipes": []
}

Now, I create a Json object as follows:

var example2json = {
    "description":"some desc",
    "trigger":{
        "triggerType":"exampleType",
        "field1":"something1",
        "field2":"something2",
        "field3":"something3"
    }
};

And send this fictional object three times to the server with this:

$.ajax({
    method: "post",
    url: "http://localhost:3000/userRecipes",
    data: example2json,
    dataType: "json",
    success: function(response) {
        $('#recipedDescriptionModal').modal('hide');
        url = "#SuccessRepice";
        window.location.replace(url);

    }
});

After this the Json server status results to be:

{
  "userRecipes": [
    {
      "description": "some desc",
      "trigger[triggerType]": "exampleType",
      "trigger[field1]": "something1",
      "trigger[field2]": "something2",
      "trigger[field3]": "something3",
      "id": 1
    },
    {
      "description": "some desc",
      "trigger[triggerType]": "exampleType",
      "trigger[field1]": "something1",
      "trigger[field2]": "something2",
      "trigger[field3]": "something3",
      "id": 2
    },
    {
      "description": "some desc",
      "trigger[triggerType]": "exampleType",
      "trigger[field1]": "something1",
      "trigger[field2]": "something2",
      "trigger[field3]": "something3",
      "id": 3
    }
  ]
}

Why the Json format changes? When I want to access to a field I have to do:

console.log(JSON.stringify(response.data.userRecipes[1]["trigger[triggerType]"]));

but I would do it in this way:

console.log(JSON.stringify(response.data.userRecipes[1].trigger.triggerType));

I'm sure to go wrong somewhere, but do not know where.

The only suspect that I have is that I create incorrectly the Json (some object nested in the elements of an array) OR there's something that I don't know about this Json Server.

Answer 1

Problem solved. The type of the POST content had to be specified:

contentType: 'application/json; charset=UTF-8',

and so, from this:

$.ajax({
    method: "post",
    url: "http://localhost:3000/userRecipes",
    data: example2json,
    dataType: "json",
    success: function(response) {
        $('#recipedDescriptionModal').modal('hide');
        url = "#SuccessRepice";
        window.location.replace(url);

    }
}); 

to that:

$.ajax({
    method: "post",
    url: "http://localhost:3000/userRecipes",
    data: example2json,
    contentType: 'application/json; charset=UTF-8', //This is the money shot ✅
    success: function(response) {
        $('#recipedDescriptionModal').modal('hide');
        url = "#SuccessRepice";
        window.location.replace(url);

    }
});

in my case, I confounded the two fields dataType with contentType.

The dataType field is used to specify the data format of the response.

The contentType is used to specify data format of the request.