Uncaught ReferenceError: data is not defined at HTMLDocument.<anonymous

I am trying to render a Json Response on a html site using AJAX but i keep getting the error:

Uncaught ReferenceError: data is not defined
    at HTMLDocument.<anonymous

JsonResponse in Question:

["[53.50119612705815, -1.1270833894501477] -> [53.34474, -3.01101]", "[53.50119612705815, -1.1270833894501477] -> [53.34474, -3.01101]", "[52.04061648544843, -0.6655072691644374] -> [51.90829, -0.5127]", "[52.04061648544843, -0.6655072691644374] -> [51.90829, -0.5127]", "[52.04061648544843, -0.6655072691644374] -> [51.90829, -0.5127]", "[53.50119612705815, -1.1270833894501477] -> [53.42705, -0.94339]"]

Html file with AJAX and JS:

<div class="'row">
    <div id="test">  
        <h1> Test </h1>
    </div>

</div>
{% endblock %}

{% block js %}

<script>
    $(document).ready(function(){
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/network/dispatch_data/',
            data: data,
            success: function(response) {
                 console.log(response);
                 $('#test').append(response.data);
           }
        });
    });
    </script>
{% endblock %}

When i inspect element in my browser, the error points to the data: data being the source of the error. Any idea what i’m doing wrong? I can view the url perfectly with the json response but making it show with ajax is proving a problem

Answer

You are sending data as the body of your request, but first you have to defined the object you are sending to API

<div class="row">
  <div id="test">
    <h1> Test </h1>
  </div>

</div>
{% endblock %}

{% block js %}

<script>
  const data = {
    bar: [1, 2, 3],
    foo: false
  }

  $(document).ready(function () {
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: '/network/dispatch_data/',
      data: data,
      success: function (response) {
        console.log(response);
        $('#test').append(response.data);
      }
    });
  });
</script>
{% endblock %}