Django：在Java脚本中引用视图列表？

Question

So I'm working with Django on a website that I am playing around with, and have been trying to research how I could get the following list in my views.py and be able to reference it in my javascript? I'm working on creating an ajax call and the tutorials I am coming accross are a bit confusing.

#lines 6 - 8 of my code.

def catalog_home(request):
    item_list = item.objects.order_by('name')   #item is the model name

note: the item model containts a name, description, overview and icon column.

Is it possible for me to use the list above (item_list) and be able to write a javascript function that does something similar to this? :

$(document).ready(function() {
    $("#showmorebutton").click(function() {
    $("table").append("<tr></tr>");
    for (var i = 0; i < 3; i++) {
            var itemdescription = item.description;
            var itemName = item.name;
            var icon = item.icon;
            $("table tr:last").append(generateCard(itemName,
                                                itemdescription,
                                                icon));
    }


function generateCard(itemNameC, itemdescriptionC, iconC) {
    var card = "<td class='tablecells'><a class='tabletext' href='#'><span class='fa "
        + iconC
        + " concepticons'></span><h2 class='header'>"
        + itemNameC
        + "</h2><p>"
        + itemdescripionC
        + "<span class='fa fa-chevron-circle-right'></span></p></a></td>";
return card;
}

I don't mean to crowd source the answer to this, I just would appreciate any feedback/advice for me to handle this task, as I am fairly new to coding.

Answer 1

You should absolutely be able to do this. The trick is to understand Django templates. You showed part of the view but you will need to render to a template. Inside the template, you can just do something like

HTML code for page goes here (if you're mixing js and html)
<script>
  var items = [{% for d in data %}
{% if forloop.last %}
    {{ d }}
{% else %}
    {{ d }},
{% endif %}
{% endfor %}];
  // code that uses items
</script>

Note there's a little bit of work required to make sure you have the right # of commas [taken from this SO answer and your code should handle the case where the array is empty.

Alternatively, you could do an ajax call from static javascript to your django server using something like django rest framework to get the list of items as a json object.