1

I have searched all over to find out a simple way to ensure the data types in json passed to the fetch requests in react to backend in python(fastapi)

everything gets converted to string, but why is this? we all know not everything is a string, so why is this the default behavior???

here is what i have but i am getting 422 Unprocessable Entity because requests keep getting all values as string

i have var3 as int and var4 as float

here is part of the typescript file

export const endpoint = async (var1: string, var2: string, var3: number, var4: number) => {
  
    const jsonData = {'var1': var1, 'var2': var2, 'var3': var3, 'var4': var4};
  
    const request = new Request('/api/create', {
      method: 'POST',
      headers: {
          'Authorization': `Bearer ${token}`,
        },
      body: JSON.stringify(jsonData),
    });

backend is fastapi/python backend

so here is what is getting passed with all values as string

{"var1'": "ehhtg", "var2": "knenjknke", "var3": "657784", "var4": "0.0035689"}

what do i need so i can have the backend to receive the json body as?

{"var1'": "ehhtg", "var2": "knenjknke", "var3": 657784, "var4": 0.0035689}

UPDATE:

this works as is, you can further ensure things with

const jsonData = {'var1': var1, 'var2': var2, 'var3':
Number(var3), 'var4': Number(var4)};

but not necessary, the values with int and float were passed as expected

issue was a typo elsewhere

uberrebu
  • 3,597
  • 9
  • 38
  • 73
  • It is essential to know which backend (language / framework..) you are using, in order to answer the question – ckoala Aug 06 '21 at 17:41
  • python(fastapi) – uberrebu Aug 06 '21 at 17:42
  • The backend would usually parse the request body (which you send stringified as JSON), and so the backend will be able to access the values correctly, I assume. – ckoala Aug 06 '21 at 17:43
  • as long as react is sending proper data types in json body..backend is fine..issue is react is sending all values as string – uberrebu Aug 06 '21 at 17:44
  • I have no experience with FastAPI, so I can only reference this part from the docs here: https://fastapi.tiangolo.com/tutorial/body/#results – ckoala Aug 06 '21 at 17:47
  • again issue is react is sending all values as string...fastapi is fine...i have tested endpoint and it works great as long as json body have values in proper data types...please read my comment...again react is the issue..not backend – uberrebu Aug 06 '21 at 17:48
  • What is calling / providing values to the endpoint function? If the values come from HTML inputs they are always Strings. The typescript types do not do any runtime type juggling – Tobias K. Aug 06 '21 at 18:42
  • my question is how do i ensure the data types stay...so can we focus on that question...i added how the values are sent in the question...i believe the question is very clear what i want to achieve..am getting `error 422` for a reason – uberrebu Aug 06 '21 at 18:44
  • values come from html form... and sent to the function...so how do i convert them to appropriate data types then? @TobiasK. – uberrebu Aug 06 '21 at 18:48
  • Are the values passed to the `endpoint` function all in the correct type? `JSON.stringify` should normally not alter the types. Can you share the React form code that passes the data to the `endpoint`? – Einar Ólafsson Aug 06 '21 at 18:50
  • If you know var3 and var4 are alwas numeric then pass them to the `Number` constructor, can do that in the function: `const jsonData = {'var1': var1, 'var2': var2, 'var3': Number(var3), 'var4': Number(var4)};` - or before calling it, i.e. when binding them to state onChange – Tobias K. Aug 06 '21 at 18:50
  • If you are seeing some of these values encoded as string, despite having `number` as the type in the argument, it means you messed up elsewhere; perhaps you're trusting an `any` somewhere where you shouldn't have. The error is in what calls `endpoint`, not `endpoint` itself and that's where you should fix your bug. – Evert Aug 06 '21 at 19:15
  • actually issue was not react or typescript all along...i did not even need to add `'var3': Number(var3), 'var4': Number(var4)` @TobiasK. was happened was one of the string values started with uppercase while it should be all lowercase...thanks guys – uberrebu Aug 06 '21 at 19:24

0 Answers0