JsonResponse from Django not sending the mentioned key value pair to Reactjs

Question

I am trying to fetch response from a Django API using react, but the key value pair which I am passing is not visible in the response.

React fetch code

handleClick(i) {
        .
        .
        .
        if (i != '=') {
         .
         .
        }
        else {
            // CODE TO FETCH FROM DJANGO API
            fetch('http://127.0.0.1:8000/solve/', {
                method: 'POST',
                body: {"expression":this.state.content}
            }).then((response)=>{ console.log(response)})
        }

}

Python Code

# Create your views here.
@api_view(["POST"])
def solveExpression(expression_json):
    try:
        math_expr = expression_json.data["expression"]
        result = eval(math_expr)
        data = {"result":result} #This is the data I want to send to reactjs
        return JsonResponse(data)
    except Exception as e:
        return JsonResponse("Error:" + str(e), safe = False)

But unfortunately the response I get doesn't have the key "result" in it.

Kindly correct me where I am committing the mistake as I am quiet new to reactjs.

SiddAjmera · Accepted Answer · 2019-12-25 08:33:52Z

2

fetch by default returns all the metadata related to the AJAX call that it did.

Your actual response would be inside the body property as a ReadableStream:

Try getting the body by calling .json() on the response.

Also, fetch requires a stringified body as a Request Payload. So you'll also have to call JSON.stringify with your request body

Here, give this a try:

handleClick(i) {
  ...
  if (i != '=') {
    ...
  } else {
    // CODE TO FETCH FROM DJANGO API
    fetch('http://127.0.0.1:8000/solve/', {
      method: 'POST',
      body: JSON.stringify({
        "expression": this.state.content
      })
    })
    .then((response) => response.json())
    .then(finalResponse => console.log(finalResponse))
  }

}

edited Dec 25, 2019 at 8:33

answered Dec 25, 2019 at 7:35

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

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

2 Comments

Star Rider Over a year ago

When I tried the above code it's showing,[Error:Unsupported media type "text/plain;charset=UTF-8" in request.]

SiddAjmera Over a year ago

@StarRider, I've updated my answer. You'll also have to call JSON.stringify to the Object that you assign to body of the request. Doing that should fix this error that you're getting.

Collectives™ on Stack Overflow

JsonResponse from Django not sending the mentioned key value pair to Reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related