500 (Internal Server Error) and Unexpected token < in JSON at position 0

Question

I'm trying to create a website based on guides. When it came to updating the basket through the buttons (decrease and increase), then trying to click on them, errors are issued: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0, which refers to

.then((data) => {
        location.reload()
    });

cart.js:24 POST http://127.0.0.1:8000/update_item/ 500 (Internal Server Error) which refers to

fetch(url, {
        method:'POST',
        headers:{
            'Content-Type':'application/json',
            'X-CSRFToken': csrftoken,
        },

and i have error in console pycharm line 104, in updateItem productId = data['productId'] KeyError: 'productId'

code cart.js:

var updateBtns = document.getElementsByClassName('update-cart')

for (i = 0; i < updateBtns.length; i++) {
    updateBtns[i].addEventListener('click', function () {
        var productId = this.dataset.stuff
        var action = this.dataset.action
        console.log('productId:', productId, 'Action:', action)

        console.log('USER:', user)
        if (user == 'AnonymousUser') {
            console.log('User is not authenticated')

        } else {
            updateUserOrder(productId, action)
        }

    })
}

function updateUserOrder(productId, action){
    console.log('User is authenticated, sending data...')

        var url = '/update_item/'

        fetch(url, {
            method:'POST',
            headers:{
                'Content-Type':'application/json',
                'X-CSRFToken': csrftoken,
            },
            body:JSON.stringify({'productId':productId, 'action':action})
        })
        .then((response) => {
           return response.json();
        })
        .then((data) => {
            location.reload()
        });
}

views.py

def updateItem(request):
    data = json.loads(request.body)
    productId = data['productId']
    action = data['action']
    print('Action:', action)
    print('Product:', productId)

    customer = request.user.customer
    product = Stuff.objects.get(id=productId)
    order, created = Order.objects.get_or_create(customer=customer, complete=False)

    orderItem, created = OrderItem.objects.get_or_create(order=order, product=product)

    if action == 'add':
        orderItem.quantity = (orderItem.quantity + 1)
    elif action == 'remove':
        orderItem.quantity = (orderItem.quantity - 1)

    orderItem.save()

    if orderItem.quantity <= 0:
        orderItem.delete()

    return JsonResponse('Item was added', safe=False)

Thank you in advance

Answer 1

What is your Python version? From Python v3.0, json.loads() will only accept unicode string.

Maybe the problem is that you have to decode request.body first :

data = json.loads(request.body.decode('utf-8'))

If this is not the problem try to check what you are receiving. Because the "<" character looks like html or xml. For example, change your function to:

def updateItem(request):
 data = json.loads(request.body)
 return HttpResponse(data)