Help with HTTP post request

I I’m trying to do an HTTP Post Request in my game
but the documentation does not make its implementation very clear to me.

Here is how I am implementing it

var options = {
        method: "POST",
        url: "",
        apikey: "",
        headers: {
            Authorization: ""
        },
        body: {
            "data": {
            "attributes": {
            "type_quiz": "mini_game",
            "student_id": 1184,
            "correct_answers": 6,
            "total_answers": 10,
            "module": 1
                }
            }
        },
        json: true
    };
    
    pc.http.post(options, function (err, respuesta) {
        console.log(respuesta);
    });

Can someone help me with this? I’m a little stuck with this.

Hey @Aramg0d!

Why don’t you try the JQuery method? I’ve found it to be a lot easier to implement - https://api.jquery.com/jquery.post/. Make sure you include the JQuery CDN in the “external scripts” section in settings - External Javascript.

1 Like

Example:

    pc.http.post(
        'https://reqres.in/api/users',
        {
            "name": "morpheus",
            "job": "leader"
        }, 
        function (err, response) {
            console.log(response);
        }
    );

Testing against this REST API: https://reqres.in/

1 Like

Thanks for the example @yaustar , it helped me understand a little better.
But what if the API I need to use has an “apikey” and a “header”. How can I send this data?

Do you have a link to the REST API doc that you are using?

The API is in a certain way private, since it is from a company that collaborates in the project, but the documentation that they sent us is this: API
It’s just the POST of “Quiz Result”.

It’s a bit difficult to test against as usually the API key is in the header. Without the full spec of what they are expecting, it’s difficult to give an example.

With PlayCanvas REST API we expect the header to have the following format for a get request https://developer.playcanvas.com/en/user-manual/api/app-get/:

pc.http.get(
        'https://playcanvas.com/api/projects/725725/app', 
        {
            headers: {
                // header here
                'Content-Type': 'application/json',
                "Authorization": "Bearer API_KEY_STRING"
            }
        },
        function (err, response) {
            console.log(err);
            console.log(response);
        }
    );

Where as Swagger expects https://swagger.io/docs/specification/authentication/api-keys/

pc.http.get(
    'https://someswaggerapi', 
    {
        headers: {
            // header here
            "X-API-Key": "abcdef12345"
        }
    },
    function (err, response) {
        console.log(err);
        console.log(response);
    }
);

Based on what you have written, I’m going to guess it’s the following

pc.http.get(
    'https://apipronidev.potencia.mx/api/v1/quizzes-results', 
    {
        // data here
        "data": {
            "attributes": {
                "correct_answers": 0,
                "module": 0,
                "student_id": 0,
                "type_quiz": "grade_exam"
            }
        }
    }, 
    {
        headers: {
            // header here
            "Content-Type": "application/json",
            "apikey": "abcdef12345"
        }
    },
    function (err, response) {
        console.log(err);
        console.log(response);
    }
);

Or

pc.http.get(
    'https://apipronidev.potencia.mx/api/v1/quizzes-results', 
    {
        // data here
        "data": {
            "attributes": {
                "correct_answers": 0,
                "module": 0,
                "student_id": 0,
                "type_quiz": "grade_exam"
            }
        }
    }, 
    {
        headers: {
            // header here
            "Content-Type": "application/json",
            "Authorization": "abcdef12345"
        }
    },
    function (err, response) {
        console.log(err);
        console.log(response);
    }
);
1 Like

@yaustar Thank you very much for your help. Your example worked perfectly.
I never found anything like this in the PlayCanvas documentation.
I hope this can serve more people who are starting with this. Again, thank you very much!

@DevilZ Thanks for the advice, I will search more about External Scripts and JQuery in playcanvas, I honestly did not know something like that could be done. Thank you.

1 Like

So, seeing this thread has made me curious about something. I’ve been using the Fetch API for my projects since it’s cleaner than a vanilla XMLHTTP request. I hadn’t considered using the pc.http API.

Would there be an advantage to switching over to it?

Not really, it uses XMLHTTP under the hood. It just saves a little boilerplate code :slight_smile:

Yeah, it requires some knowledge about using REST APIs in general. I’ve recently added some examples to the API docs which will be there next engine release. But they are similar to what I posted in the first reply.

1 Like