I saw a similar question but the answer is rather vague. I created a function based view for updateItem. I am trying to get json data to load based on my request. but am getting the error -> object has no attribute 'data'

Views.py file:

def updateItem(request):  
    
    data = json.loads(request.data)
    
    productId = data['productId']
    action = data['action']
    print("productID", productId, "action", action)
    customer = request.user.customer
    product = Product.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)

JS File:

function updateUserOrder(productId, action) {
    console.log('User is logged in...');
    let url = '/update_item/';

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

urls python file:

urlpatterns = [
    path("",views.store,name="store"),
    path("cart/",views.cart,name="cart"),
    path("checkout/",views.checkout,name="checkout"),
    path("update_item/",views.updateItem,name="update_item"),
]

The Error seems to also occur in my fetch function in the JS file. With my method POST. Can't find a solution, what am I doing wrong here?

CodePudding user response：

Try:

data = json.loads(request.body)

Because the request doesn't have data, since you pass the data as body: JSON.stringify({ productId: productId, action: action }),

CodePudding user response：

The main problem is that you are trying to access 'request.data', there is no such attribute. What you want is to retrieve data from the POST request. (Also, note that good practice is to have your views and variable names in snake_case form, whereas camelCase is used for classes):

def updateItem(request):  
    
    data = json.loads(request.POST.get('data'))
    ...
        
    return JsonResponse("Item was added!", safe=False)

Although, to complete my answer, I must say that I had problems with your JS function, with the csrf token not being properly attached. My test solution:

views.py

from django.shortcuts import render
from django.http import JsonResponse
import json

def update_item(request):
    return render(request, 'update_item.html', {})

def update_item_ajax(request): 
    data = json.loads(request.POST.get('data'))
    print(data)
    ...
    
    return JsonResponse({'message': '"Item was added!"'}, safe=False)

# output of update_item_ajax print
{'productId': 1, 'action': 'myaction'}

urls.py

from django.urls import path
from core import views

app_name = 'core'

urlpatterns = [
    path('update/item/', views.update_item, name='update-item'),
    path('update/item/ajax/', views.update_item_ajax, name='update-item-ajax'),
]

update_item.html

{% extends 'base.html' %}

{% block content %}
<button onclick="updateUserOrder(1, 'action')"> update item </button>
{% endblock %}

{% block script %}
    <script>
        function updateUserOrder(productId, action) {
            console.log('User is logged in...');
            let url = "{% url 'core:update-item-ajax' %}";
            
            var payload = {
                productId: productId,
                action: action
            };
            var data = new FormData();
            data.append( 'data' , JSON.stringify( payload ) );
            data.append('csrfmiddlewaretoken', '{{ csrf_token }}');

            fetch(url, 
            {   
                method: 'POST',
                body: data,
            })
            .then(function(res){ return res.json(); })
            .then(function(data){ console.log(data); });
        }
    </script>
{% endblock %}