使用ajax在对象中发布Json对象

Question

I am trying to post newly created data to my json database with this call

function sendtovenaarData(url){
$.ajax({

    url: "http://localhost:3000/" + url,
    type: 'POST',
    data:
    {
        voornaam:  $("#voornaam").val(),
        achternaam:  $("#achternaam").val(),
        beroep: $("#beroep").val(),
        adres:{
            streetAddress: $("#streetAddress").val(),
            city: $("#city").val(),
            state: $("#state").val(),
            zip: $("#zip").val()
        },
        haardplaats: $("#haardplaats").val(),
        favoriete_quote: $("#favoriete_quote").val()
    }

}).done(function () {

    console.log("data added");
    location.reload();

}).fail(function (xhr, message, error) {
    console.log(xhr, message, error);
});}

an i want to save it like the top one in the picture but it saves like the bottom one is there anyway around this? image of saved json

I have already tried creating a variable and placing the adres in there but it did not work. Thank you for helping

Answer 1

Show your server code. If you use PHP then you can try it

$data = json_encode($_POST);

to convert array to json string

Answer 2

See this answer: https://stackoverflow.com/a/5571112/3432422

The data parameter should be a stringified object, like this:

function sendtovenaarData(url){
    $.ajax({
        url: "http://localhost:3000/" + url,
        type: 'POST',
        data: JSON.stringify(
        {
            voornaam:  $("#voornaam").val(),
            achternaam:  $("#achternaam").val(),
            beroep: $("#beroep").val(),
            adres:{
                streetAddress: $("#streetAddress").val(),
                city: $("#city").val(),
                state: $("#state").val(),
                zip: $("#zip").val()
            },
            haardplaats: $("#haardplaats").val(),
            favoriete_quote: $("#favoriete_quote").val()
        })
    }).done(function () {
        console.log("data added");
        location.reload();
    }).fail(function (xhr, message, error) {
        console.log(xhr, message, error);
    });}

Answer 3

an i want to save it like the top one in the picture but it saves like the bottom one is there anyway around this?

You should specify Ajax headers, something like:

$.ajaxSetup({
 dataType: 'json',
 contentType: 'application/json; charset=utf-8'
});

After it each ajax call will be send with JSON-specific headers. To send data you should do this one:

$.ajax({

    url: "http://localhost:3000/" + url,
    type: 'POST',
    data:
    JSON.stringify({
        voornaam:  $("#voornaam").val(),
        achternaam:  $("#achternaam").val(),
        beroep: $("#beroep").val(),
        adres:{
            streetAddress: $("#streetAddress").val(),
            city: $("#city").val(),
            state: $("#state").val(),
            zip: $("#zip").val()
        },
        haardplaats: $("#haardplaats").val(),
        favoriete_quote: $("#favoriete_quote").val()
    })

}).done(function () {

    console.log("data added");
    location.reload();

}).fail(function (xhr, message, error) {
    console.log(xhr, message, error);
});}

If you are using PHP on your backend, it will be not enough, because PHP can't work with JSON post data, and your $_POST will be empty, but if you are using something else (java with spring, node js ... etc) it should parse data properly. In case of php, look here - PHP: file_get_contents('php://input') returning string for JSON message