Decoding json response in React JS

Question

I am trying to decode the jsonified response recieved from my flask backend as shown below:

if success_flag:
            waterdetails = res["Transaction_chain"]
            print(waterdetails)
            senderObject.mine_block(waterdetails)
            #print(senderObject.chain)
            recieveObject.mine_block(waterdetails)
            #print(recieveObject.chain)
            print("Here as well")
            if senderObject.is_chain_valid() and recieveObject.is_chain_valid():
                adminDataBase.requestUpdate("_id",ObjectId(senderID),
                {"Transaction_So_Far":senderObject.chain})
                adminDataBase.requestUpdate("_id",ObjectId(recieverID),
                {"Transaction_So_Far":recieveObject.chain})
                print("Success!!!!!")
                return(jsonify({"Yes":"Transaction Successful!"}))

Here is my React JS onClick function to pick the response:

onClick={async(e)=>{
        e.preventDefault();
        let pwd = prompt('Please enter your Password to confirm!');
        const JSONString = {
            email:props.Email,
            _id:details._id,
            Credits:details.Credits,
            password:pwd
        }
        const response = await fetch('http://localhost:5000/make-a-transaction',{
          method: 'POST',
          headers:{
            'Content-Type':'application/json'
          },
          body:JSON.stringify(JSONString)
        });
        console.log("Hello "+response.json());
      }}

here is my console of backend:

And here is my console.log output:

Can someone help me with decoding the json in the right way so that I get my response message and body back?

Leo · Accepted Answer · 2020-08-04 18:15:27Z

response.json() actually returns a Promise which resolves to a javascript object if the body is parsable as json and rejects otherwise. (You can also see this in your logged message.)

To fix this and get your object you can just use await as you did with the Promise returned by fetch:

const response = await fetch('http://localhost:5000/make-a-transaction',{
   method: 'POST',
   headers:{
     'Content-Type':'application/json'
    },
    body:JSON.stringify(JSONString)
});
const content = await response.json();
console.log("Hello ", content);

Note that you should always add error handling (in this case usually a try .. catch block) for async functions in react. If there happens an error somewhere in your async function, it will just return a Promise which rejects with the error. However your onClick function is probably called by something which won't evaluate the return value. Therefore the error will just be ignored silently, which isn't what you want in most cases.

Collectives™ on Stack Overflow

Decoding json response in React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related