How to send a POST request with Advanced Custom Fields data

Question

I'm trying to send a post request to the rest api with some custom fields. THis is my code

                let newCharacter = {
                    'title': $('.create-char-name').val(),
                    'acf': {
                        'char_class': $('#char-class').val(),
                        'char_subclass': $('#char-subclass').val(),
                        'char_level': $('#char-level').val()
                    },
                    'status': 'publish'
                }

                $.ajax({
                    beforeSend: (xhr) => {
                        xhr.setRequestHeader('X-WP-Nonce', spbk_data.nonce);
                    },
                    url: spbk_data.root_url + '/wp-json/wp/v2/character/',
                    method: 'POST',
                    data: newCharacter,
                    success: (response) => {
                        console.log("congrats");
                        console.log(response);
                    },
                    error: (response) => {
                        console.log("Sorry");
                        console.log(response);
                    }
                });

The request goes through without any problems, but when I check the json, the "acf" field returns false. I'm using the acf to wp api plugin, if that information is useful.

The only info I found about this issue was this post, but I don't really understand what the answer meant. I tried adding xhr.setRequestHeader('Content-Type', application/json); (I also tried with lower case initials), below the nonce, like the post seems to suggest, but that returns this error:

"{"code":"rest_invalid_json","message":"Invalid JSON body passed.","data":{"status":400,"json_error_code":4,"json_error_message":"Syntax error"}}"

Nish · Accepted Answer · 2020-05-31 09:43:48Z

0

Try something like below:

function NewCharacter(){

    this.title;
    this.acf;
    this.status;
}

function CharInfo(){

    this.char_class;
    this.char_subclass;
    this.char_level;

}       

var charInfo = new CharInfo();
charInfo.char_class=$('#char-class').val();
charInfo.char_subclass=$('#char-subclass').val();
charInfo.char_level=$('#char-level').val();

var newCharacter = new NewCharacter();
newCharacter.title=$('.create-char-name').val();
newCharacter.acf=charInfo
newCharacter.status="publish";

$.ajax({
     beforeSend: (xhr) => {
         xhr.setRequestHeader('X-WP-Nonce', spbk_data.nonce);
     },
     url: spbk_data.root_url + '/wp-json/wp/v2/character/',
     method: 'POST',
     data: JSON.stringify(newCharacter),
     success: (response) => {
         console.log("congrats");
         console.log(response);
     },
     error: (response) => {
         console.log("Sorry");
         console.log(response);
     }
});

answered May 31, 2020 at 9:43

Nish

1,03215 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nish Over a year ago

Or, try to use directly JSON.stringify(newCharacter), with your solution. You should pass the JSON string , not the Object itself

Alan Fernandes Over a year ago

That didn't work. I tried with both your and my solution, but they return an empty object

Alan Fernandes · Accepted Answer · 2020-05-31 19:42:13Z

0

Yeah, I'm kinda dumb. I tried another plugin to make the bridge between acf and the rest api, and it worked.

It came to my mind many times to try another plugin, but I thought "they do the same thing, there's no point in trying that". It goes to show that you shouldn't just brush off solutions that seem too obvious or stupid.

answered May 31, 2020 at 19:42

Alan Fernandes

317 bronze badges

Collectives™ on Stack Overflow

How to send a POST request with Advanced Custom Fields data

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related