Django is returning JsonResponse, can see the desired JSON response in browser Network tab, but unable to access on the FE

user_3123109 0
Viewed 204

Not quite sure what I'm doing wrong here.

I have a method in utils.py that returns the dictionary:

import boto3
import base64


# Create a Rekognition client
def detect_faces(photo):
    ...
    return {
        'comment': comment,
        'rekognition_response': response,
        'url': url,
    }

Which sent back to the views.py:

from django.shortcuts import render
from django.http import JsonResponse, HttpResponse

from . import utils

def index(request):
    return render(request, 'index.html')

def submit(request):
    response = utils.detect_faces(request.body)
    return JsonResponse(response)

I can see the response I'm expecting in the Network tab of the browser:

enter image description here

But then on FE, I'm not seeing it in the res:

const submitScreenshot = async () => {
  const picture = document.getElementById('webcam-picture-submit').src;
  const res = await fetch('/submit/',
  {
    method: 'POST',
    headers: {
      'X-CSRFToken': csrftoken 
    },
    body: picture.replace('data:image/png;base64,','')
  })
  console.log(res);
  console.log('Submitted.');
};

enter image description here

I get the sense this is something super basic I'm missing, what is it?

fetch django python json javascript
1 Answers

As documented you have to receive data from Response which is also Promise

The fetch() method takes one mandatory argument, the path to the resource you want to fetch. It returns a Promise that resolves to the Response to that request, whether it is successful or not

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));
user_25050710
Related