Sending an array from jQuery to a Django view

I am making a very small application to learn Django. I am send a nested array from jQuery and trying to loop it in my Django view.

The jQuery code is as follows:

$(document).on('click','#exModel',function () {
        const sending = [];
       $("table tr").each(function () {

               var p1 =  $(this).find("th label").html();
               var p2 = $(this).find("td input").attr('id');
               var p3 = $(this).find("td input").val();

               const build = [];
               build.push(p1, p2, p3);
               sending.push(build);
               console.log(sending);
           });
       $.ajax({
               url: '../coreqc/exModel/',
               data: {'sending': sending},
               type: 'post',
               headers: {'X-CSRFToken': '{{ csrf_token }}'},
               async: 'true',
               success: function (data) {
                   
                console.log("I made it back")
                        //dom: 'Bfrtip',

               }
                    });
                });

The above works and takes the following form in the console: Note that the 3rd value is intentionally empty as I sent the form with no values in the fields to get the console read out.

[Log] [["Product A", "1", ""], ["Product B", "2", ""], ["Product C", "3", ""], ["Product D", "4", ""], ["Product E:", "5", ""], ["Product F", "6", ""], ["Product G", "7", ""], ["Product H", "8", ""], ["Product I", "9", ""], ["Product K", "10", ""], …] (36) (coreqc, line 491) 
[Log] I made it back # This is the success text in the above jQuery code

It is making it to my view and I am able to print() the output to the shell:

exModel view:

def exModel(request):
    sentData = request.POST
    print(sentData)

    template = loader.get_template('coreqc/tester.html')
    context = {
    'sentData':sentData
    }
    return HttpResponse(template.render(context, request))

Now, ‘sentData’ does print to the shell but it does not look right to me or at least the ‘sending[1][]‘ part does not. When I say it does not look right, I do not understand the empty square bracket. I can not access sending like sending[1][2] – I get a dictionary key error.

<QueryDict: {'sending[0][]': ['Product A:', '1', ''], 'sending[1][]': ['Product B', '2', ''], 'sending[2][]': ['Product C', '3', ''], 'sending[3][]': ['Product D', '4', ''], 'sending[4][]': ['Product E', '5', ''], 'sending[5][]': ['Product F', '6', ''], 'sending[6][]': ['Product G', '7', ''], 'sending[7][]': ['Product I', '8', '']}>

What I would like to be able do is to loop through each of values in the QueryDict in a loop in my view, not just print them. However, I am unsure how I access them or whether what is being sent is accessible.

get.values() – works and I can print to console – looks same as above.

I can loop and print like so:

for x, obj in sentData.items():
        print(x)
    
    for y in obj:
        print(y + ':', obj[y])

However I just get this output, it prints the below:

sending[0][]
sending[1][]
sending[2][]
sending[3][]

What I need is to access to the inner values i.e. "Product A", and I am not quite sure on how I do this.

So in summary:

Am I sending the data from jQuery in the right way? right being a way that Python Django can handle.
How do I loop said data to gain access to each data field.

Many thanks for any help.

You need to sign in to view this answers

Related Post