Reciving JSON with FastAPI-backend

Question

I have a little problem with sending JSON from my frontend to my backend and reading it there. At first the easy part, in my index.html I read what's written in some fields and pass it to var inputs

<script type="text/javascript">
    function get_inputs()
    {
        var inputs =
            {
                T_0 : document.getElementById("a").value,
                E_A : document.getElementById("b").value,
                           }
        backend_test(inputs)
        console.log("input:" + JSON.stringify(inputs))
        return inputs
    }
</script>

"console.log("input:" + JSON.stringify(inputs))" outputs to console:

input:{"T_0":"3","E_A":"5"}

this calls the function backend_test which is supposed to take the input I made and send it as JSON via a GET request to my FastAPI:

function backend_test(inputs)
{
    var inputs = inputs
    
    console.log('frontend_func inputs out: ' + JSON.stringify(inputs))


$(document).ready(function()  //supposed to wait for the functions to be fully loaded
{
$.ajax({
            type: 'GET',
            contentType: 'application/json',
            data: JSON.stringify(inputs),
            dataType: "json", 
            url:"fastapi/compute",
            success: function (result) 
            { 
                console.log(result)
                console.log("should work")
            },
            error: function (error) 
            {
                console.log(error)
                console.log("error, but where?")
            }
        });
});
return("yay")
}

Now, at my backend, I somehow want to use the information for further calculations:

from fastapi import Request, FastAPI
from pydantic import BaseModel
from .self_ignition import test_function
from typing import List

class Liste(BaseModel):
    T_0: int
    E_A: int

@app.get("/compute")
def calculate(liste: Liste):

    
    return {"backend output:" + liste}

Sending the request as it is delivers an "Error 422 Unprocessable Entity" in my frontend console and i get the "error, but where?" message defined in my "backend_test" function. A connection to the backend is there, calling /compute and not having any inputs in calculate() will give me the in function backend_test(inputs) defined success output: "should work". I cant look into errors in the backend code directly because everything is set_up in a company GitLab Framework and testing is only possible by commiting changes and starting the updated Webpage.

Using "Base Model" was my last try after reading about it in the documentation, the guy working on a similar project, but with a different API simply had to write "def calculate (body)" and there was his information but this doesn't seem to work in this API

Note that these are only parts of the code for making the connection work. What I really need is to know how FastAPI handels the receiving of JSON because the documentation didn't really help me make it work.

Thanks in advance, I'm sitting on this little problem for 2 days and keep coming back to the same help-pages but cant make it work.

Solution:

add Number() to this part because i later adress them as int not str:

T_0 : Number(document.getElementById("a").value),
E_A : Number(document.getElementById("b").value),

change type to POST here:

$.ajax({
            type: 'POST',

and here:

@app.post("/compute")

and don´t try to return the list but a variable that takes elements of this list as str:

x=str(liste.T_0)

return {"backend output:"+x}

You dont reallyt seem to say what your error is? when you send the data to the backend, does your backend log an error? if so whats the error? — Chris Doyle
i´m sorry, added the error message (even though it might not be very helpful). was a little bit to focused on delivering all the code snippets to make clear what i want to achieve. — Drover92
Can you add the output of console.log("input:" + JSON.stringify(inputs)) ? — Yagiz Degirmenci
added the outpot to the question, it gives me: input:{"T_0":"3","E_A":"5"} where 3 and 5 is my input at the frontpage — Drover92

Yagiz Degirmenci Yagiz Degirmenci · Accepted Answer · 2021-01-28T11:34:36

You should convert values to integer.

Your model expects integers.

class Liste(BaseModel):
    T_0: int
    E_A: int

Which means you should send like this

{"T_0": int,"E_A": int}

But in your current situation, you are sending string instead of int.

Convert it to int using Number or parseInt then it should work.

Change your request method to post.

type: 'POST'

Also your change your method to post on your server side.

@app.post("/compute")

Reciving JSON with FastAPI-backend

1 Answers