Cannot send array list from JavaScript to Django View

Question

I have an array called tableData. But whenever I execute it I couldn't get the result on my python terminal. Since i already put print(pieFact), it should print me the output right? Other than that, when i put var data = {'test': '2', csrfmiddlewaretoken: '{{ csrf_token }}'};, i actually can get the 2 output in my terminal but not my array when I put 'test': tableData. Can anyone guide me what I'm doing wrong here? Thanks

URL

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index,name='home-page'),
    path('send/', views.send, name='test'),

]

Javascript

<script>
//declare the array as a global
var tableData = [];
var URL="{% url 'test' %}"

$(document).ready(function () {
  $(".button").on("click", function () {
    para = document.getElementById("Parameter").value;
    condi = document.getElementById("Condition").value;
    value2match = document.getElementById("valuetomatch").value;

    if (para && condi && value2match !== null) {
      var table = document.getElementById("myTable");
      var row = table.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);

      cell1.innerHTML = document.getElementById("Parameter").value;
      cell2.innerHTML = document.getElementById("Condition").value;
      cell3.innerHTML = document.getElementById("valuetomatch").value;
      cell4.innerHTML =
        '<button  class = "del_img "onClick="delSpec(this)"><img src="deleteimg.png" width="30" height="30"></button> </div>';

      var myTab = document.getElementById("myTable");

      // Only add the new row:
      tableData.push([
        document.getElementById("Parameter").value,
        document.getElementById("Condition").value,
        document.getElementById("valuetomatch").value
      ]);

      modal.style.display = "none";
    } else {
      alert("All the input box cannot be empty!");
    }
  });

document.getElementById("buttonSubmit").onclick = function () {
        alert(tableData);
        var data = {'test': '2', csrfmiddlewaretoken: '{{ csrf_token }}'};
        $.post(URL, data);

      };
});
</script>

View.py


def send(request):
    arr = request.POST.get('test')
    print(type(arr))
    print(arr)
    return render(request, 'DemoApp/hi.html')

It always returning None

Is is normal that your variable is printed after the get request and after the post request in your terminal output? — blondelg
– blondelg, Commented May 31, 2021 at 7:22
@blondelg yes it cause no issue. Since I can get the 2 output when I change the tableData to 2 . i already update the URL setup above. tq — albert lim
– albert lim, Commented May 31, 2021 at 7:24

blondelg · Accepted Answer · 2021-05-31 07:36:14Z

2

You may have an issue passing a javascript array object to the request,

maybe try to convert it to json before passing it to the post request:

var tableDataJson = JSON.stringify(tableData);

answered May 31, 2021 at 7:36

blondelg

9961 gold badge9 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

albert lim Over a year ago

I just figure out and fix it before your comment haha. But still thank you for your respond !

blondelg Over a year ago

Answer are always comming after posting in SO, thanks for upvote anyway.

albert lim Over a year ago

Currently im getting my value as ['[["Subject","Equals","test"],["Text","Contain","Testing 1 2 3"]]']. Do you know how can I make it as {[1, 2, 3], [4, 5, 6]} ? So that i can count how many value inside the json with len(arr)

blondelg Over a year ago

I need to spend a bit more time on this topic but I think you may have a look at what is sent on a front side to receive what expected on the server side. Do you have a print of tableData?

blondelg Over a year ago

Let us continue this discussion in chat.

|

albert lim · Accepted Answer · 2021-05-31 07:37:07Z

0

So I figure out that I need to change my array tableData to json first before sending it. I solved it by using JSON.stringify(tableData).

JavaScript:

document.getElementById("buttonSubmit").onclick = function () {
        alert(tableData);

        var data = {'data[]': JSON.stringify(tableData), csrfmiddlewaretoken: '{{ csrf_token }}'};
        $.post(URL, data);



      };
});

View.py


def send(request):
    
    arr = request.POST.getlist('data[]', None)
    print(type(arr))
    print(arr)
    return render(request, 'DemoApp/hi.html')

answered May 31, 2021 at 7:37

albert lim

5910 bronze badges

Collectives™ on Stack Overflow

Cannot send array list from JavaScript to Django View

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related