在Django 1.8.1中將視圖中的列表用作javascript模板中的數組

Question

我在views.py中有一段代碼，它從目錄中獲取文件名：

def imgArray(request):
filepath = STATIC_PATH+"\\images"
imageArray=[]
ext='.jpg'
for i in os.listdir(filepath):
    if(os.path.splitext(i)[1] == ext):      
         imageArray.append( i )
context = {'imageArray': imageArray}
print context
return render(request, 'imgpage/add_category.html',context)



def add_category(request):
    # A HTTP POST?
    if request.method == 'POST':
       #Do some actions
    else:
        # If the request was not a POST, display the form to enter details.
        imageArray = imgArray(request)
    return render(request, 'imgpage/add_category.html')

我想在javascript中使用此圖像文件數組。 我想使用文件名數組，以便可以使用js更改圖像源。 print context語句在python控制台中產生以下輸出：

{'imageArray': ['image0.jpg', 'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.
jpg', 'image5.jpg', 'image6.jpg', 'image7.jpg', 'image8.jpg', 'image9.jpg']}

但是我根本無法訪問模板中的imageArray。 這是我嘗試測試模板html文件中是否已傳遞數組的腳本：

在add_category.html文件中：

{% for img in imageArray %}
        <li>{{ img|safe }}</li>
        <li>{{ img }}</li>
        <p>img</p>
{% endfor %}

另外，請注意， <p>標記內的“ img”也不會呈現在屏幕上。

<script type="text/javascript">
        var images = "{{imageArray|safe}}";
        console.log(images);
        console.log("imgx="+images[1]);
        document.getElementsByTagName("img")[0].src =  DJANGO_STATIC_URL+images[2];
    </script>

在上面的腳本中，第一個控制台日志在控制台中打印出空行，而第二個日志則顯示“ imgx = undefined”

請建議我可以將python列表用作JS數組的方法。 我使用Django 1.8.1，但是我將托管的服務使用1.7.x。 因此，對兩者都適用的方法會很棒。

Answer 1

您在這里有一個非常特殊的結構。 imageArray()是一個視圖，它返回完整的HttpResponse； 但是您是從另一個視圖add_category調用它的。 而且，您對結果一無所成。 它被扔掉，再也沒有經過任何地方。 因此，自然地，模板中總是空白。

我不確定您在做什么，因此很難知道您在這里真正想要的是什么。 但我懷疑imageArray()應該是普通的實用程序方法，該方法僅返回圖像列表：

def imgArray():
    filepath = os.path.join(STATIC_PATH, "\\images")
    images =[f for f in os.listdir(filepath) if f.endswith('.jpg')]
    return images

然后，您實際上需要在add_category函數中使用該值進行add_category ：

def add_category(request):
    ...
    else:
        imageArray = imgArray()
    return render(request, 'imgpage/add_category.html', {imageArray: imageArray})

Answer 2

所以這就是我所做的：views.py

#importing json
import json
from django.core.serializers.json import DjangoJSONEncoder

def imgArray(request):
    filepath = STATIC_PATH+"\\images"
    imageArray=[]
    ext='.jpg'
    for i in os.listdir(filepath):
        if(os.path.splitext(i)[1] == ext):      
             imageArray.append( i )
    json_list = json.dumps(list(imageArray), cls=DjangoJSONEncoder)
    return json_list

def add_category(request):
    # A HTTP POST?
    if request.method == 'POST':
        #Do something
    else:
        # If the request was not a POST, display the form to enter details.
        imageArray = imgArray(request)
        context = {'imageArray': imageArray}
        return render(request, 'imgpage/add_category.html',context)

    return render(request, 'imgpage/add_category.html')

在add_category.html中：

<script type="text/javascript">
            var images = {{imageArray|safe}};               
            document.getElementsByTagName("img")[0].src =  DJANGO_STATIC_URL+"images/"+images[1];
        </script>

希望這可以幫助某人:)干杯！