Using jQuery to access Django database

Question

I am making Django website and I need to access my database (which is SQLite3) in jQuery to edit the contents of my site.

Let's say I have a one-dimensional database like this:

in my Django "Views.py" I have this:

from exampleapp.models import database

def page(request):
    data = database.objects.all()
    return(render(request, "homepage.html", {"data":  data})) 

In my HTML file, I have this (which is an iteration of the database):

          {% for x in data %}
            <p id = {{x}} > {{x}} </p>
          {% endfor %} 

Which outputs this on the HTML page:

Anyways, the id of each DOM element is equal to it's content ("apple", "cheese", etc...). I would like to reference these id's in jQuery so I can edit them. For instance, if wanted to reference the element with the id = "cheese", how can I do that in jQuery?

I understand that there is an Ajax function in jQuery which allows it to parse JSON. I can convert my database into JSON format with this in my "Views.py" file (but I still don't know how to access this new serialized version of my data, unless I use Python to save it to a .json file):

from exampleapp.models import database 
from django.core.serializers import serialize

def page(request):
        data = database.objects.all()
        dataj = serialize("json", data, fields=("title"))
        return(render(request, "homepage.html", {"data":  data})) 

and hence use this in jQuery to get that JSON:

$.ajax({
  dataType: "json",
  url: url, //If I use this method, where do I draw the JSON from? The database file itself? 
//Do I have to create a JSON file in my Django "Views.py" of my serialized data and then use that 
//path as the URL? This is where I am mixed up. 
  data: "text",
  success: success
}) 

The only way I see that I can reference the database is to import it into the jQuery file, and then hence I can iterate the contents to be able to get the index of the database iteration in HTML (or perhaps forget the for loop in the HTML and work with the database completely in jQuery).

How do I reference the items that was in the HTML for loop?

Also (and perhaps a more efficient method of solving my problem): how can I turn my SQLite3 database into JSON so I can use it in my jQuery file? Or is there a better way to "import" my database into my jQuery file that is built in with Django?

Answer 1

Okay, so I finally found a simple fix for this!

It involves 3 Steps:

1. In your "views.py" file:

database = "apple, cheese, oatmeal, nootnoot, sosbrigade"

def homepage(request):
    data = database.objects.all() #1. Retrieve Your Database. 

    datacount = data.count() #2. Get the Number of Items in your Database. 

    r = [] #3. An empty list to contain the range of numbers from to datacount. 

    for x in range(0, datacount): 
        #4. Add the range of numbers to the list r. 
        r.append(x)

    #5. "Zip" both the range numbers (r) and the database items (data) together. 
    #This will create a list in this format: [(0, item1), (1, item2)...] 
    d = zip(r, data) 

    #Return the list d as "data" for the HTML template. 
    return(render(request, "homepage.html", {"data": d})) 

2. In your HTML file:

<!--  
 {{x.0}} outputs the item **index** 
 {{x.1}} outputs the **actual** item contents. 

 when you set the element's id to "data{{x.0}}", it's id will be "data0, data1, 
data2... etc", whilst the text of the element is {{x.1}}, which is the database. 


-->
          {% for x in data %}
            <p id = data{{x.0}} > {{x.1}} </p>
          {% endfor %} 




  <!-- 
 This will output: 

apple (but it's id will be "data0") 
cheese (but it's id will be "data1") 
oatmeal (but it's id will be "data2") 
nootnoot (but it's id will be "data3") 
sosbrigade (but it's id will be "data4") 


 --> 

This solves my problem because, in my jQuery file, I can then reference this database systematically instead of by what their contents are:

3. In your jQuery (or Javascript file; with the code translated accordingly):

$(document).ready(function() {

   //I can access the database like this (by index) or I could tweak the 
   //element's id's in a way that makes it easier for me to access them, since 
   // I have both an index and the contents. 
   //I think you can also use the $(":contains("text") function of jQuery to perhaps 
   //Find the id of the element by it's database content. 

  $("#data0").text("YASS!") 
  //This changes "apple" to "YASS!" :P. 

}); 

It's extremely simple, but it answered my question and allowed me to avoid any API calls, custom template tags, etc...

Answer 2

This is a large topic. The industry standard for doing what you want is creating a RESTful API. The big issue here is that JavaScript (like jQuery) is run on the client browser, not the server that you control. This opens all sorts of security issues.

Fortunately, Django REST Framework is here to help.

I’d recommend going through the DRF tutorial to get started.

https://www.django-rest-framework.org/tutorial/quickstart/