在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>

希望这可以帮助某人:)干杯！