Django the JSON object must be str, bytes or bytearray, not NoneType

Question

I am creating an ecommerce website with the help of Django and I am using Local Storage as my cart and I am using a button to post my data to checkout page and also using some jquery and ajax to post my data on server side but when I am sending my local storage to the server Side I am getting the error like this, See the error

My cart.html is like this from where I am sending the data to checkout,

<form action="/checkout" method="post" >
        {% csrf_token %}
   <button class="button-78" role="button">Proceed to buy</button>
    </form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script>
    $('.plus').click(function(e){
        console.log("hello");
        e.preventDefault();
        cartt=JSON.parse(localStorage.getItem('cart'));
        console.log(cartt)
        var idstr=this.id.toString();
        cartt[idstr]=cartt[idstr]+1;
        localStorage.setItem('cart',JSON.stringify(cartt))
        $.ajax({
            type:"POST",
            url:"http://127.0.0.1:8000/cart",
            data:{
                prodd:localStorage.getItem('cart'),
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
            },
            success:function(){
                location.href = "/cart"
            }
        });
    });
    $('.minus').click(function(e){
        e.preventDefault();
        cartt=JSON.parse(localStorage.getItem('cart'));
        var idstr=this.id.toString();
        cartt[idstr]=cartt[idstr]-1;
        localStorage.setItem('cart',JSON.stringify(cartt))
        $.ajax({
            type:"POST",
            url:"http://127.0.0.1:8000/cart",
            data:{
                prodd:localStorage.getItem('cart'),
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
            },
            success:function(){
                location.href = "/cart"
            }
        });
    });
    $('.button-42').click(function(e){
        e.preventDefault();
        cartt=JSON.parse(localStorage.getItem('cart'));
        var idstr=this.id.toString();
        delete cartt[idstr];
        localStorage.setItem('cart',JSON.stringify(cartt))
        $.ajax({
            type:"POST",
            url:"http://127.0.0.1:8000/cart",
            data:{
                prodd:localStorage.getItem('cart'),
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
            },
            success:function(){
                location.href = "/cart"
            }
        });
    });
    $('.button-78').click(function(e){
        $.ajax({
            type:"POST",
            url:"http://127.0.0.1:8000/cart",
            data:{
                prodd:JSON.stringify(localStorage.getItem('cart')),
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
            },
            success:function(){
                location.href = "/checkout"
            }
        });
    });
</script>

And this is my views.py file,

def checkout(request):
    if request.method == "POST":
        global context
        dict=json.loads(request.POST.get('prodd'))
        ldict=list(map(int,dict.keys()))
        objects=product.objects.filter(pk__in=ldict)
        print(dict)
        context={'object':objects,'dict':dict}
    return render(request,'checkout.html',context)

But I tried the same method in my product.py file where on click of add to cart button it successfully goes to the cart page and here also posting my local storage data to the server but it didn't showed me error for that. See here this my product.html page,

<form id="cartSubmit">
                        {% csrf_token %}
                        <button id="{{prod.id}}" type="submit" class="cart">
                            <i class="fa fa-shopping-cart"></i>
                            Add to cart</button>
                        </form>


 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>


    <script>
        function clickme(smallImg) {

            var fullImg = document.getElementById("imagebox");
            fullImg.src = smallImg.src;

        }
        // find out the cart items from localstorage
        if(localStorage.getItem('cart')==null){
            var cart={};
        }
        else{
            cart=JSON.parse(localStorage.getItem('cart'));
        }
        // if the cart button is clciked then increment the item
        $('.cart').click(function(e){
            e.preventDefault();
            var idstr=this.id.toString();
            console.log(idstr);
            if(cart[idstr] != undefined){
                cart[idstr] = cart[idstr] + 1; 
            }
            else{
                cart[idstr] = 1;
            }
            localStorage.setItem('cart',JSON.stringify(cart));
            $.ajax({
                type:"POST",
                url:"http://127.0.0.1:8000/cart",
                data:{
                    prodd:JSON.stringify(cart),
                    csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                },
                success:function(){
                    location.href = "/cart"
                }
            });
        });
            
           

    </script>

And here is my views for cart,

def cart(request):
    if request.method == "POST":
        global context
        log=templates.objects.get(pk=1)
        user=templates.objects.get(pk=2)
        cart=templates.objects.get(pk=6)
        dict=json.loads(request.POST.get('prodd'))
        ldict=list(map(int,dict.keys()))
        objects=product.objects.filter(pk__in=ldict)
        context={'logo':log,'user':user,'cart':cart,'object':objects,'dict':dict}
        
    return render(request,'cart.html',context)

I tried multiple methods like json.loads() and json.dump() and both combined but it's still shows me the same error. please help me thanks in advance.

Answer 1

I see your code well, only can tell you that you need to be care about getting data from POST, if you are not sure what are coming from client side, so try to get data from dict using a default value with a valid value or save it before loads

prodd_val = request.POST.get('prodd', None)
if prodd_val:
    prodd_data = json.loads(prodd_val)
else:
    raise ValidationError("error message")  # or something else

or maybe:

prodd_data = json.loads(request.POST.get('prodd') or {})

and another advise is to change your var name from "dict" to another because that is a reserved name for type dict, so I guess data is not sending correctly to server, try to print data posted, use print(request.POST) before json.loads line and check data is coming correct.