javascriptの連想配列をHTMLでループで表示させたいです。

Question

Djangoを勉強しているものです。
ajaxで辞書を取得しJSまでは値を持ってこれているのですが、
この値をHTML側でループさせて表示したいです。
どのように実装してよいのか全くわからないのでどなたかご教授願えますでしょうか。

Template

<h2>TEST PAGE</h2>

<div id="posts"></div>

<button id="test" value="{{user.id}}">aaa</button>

<a id="aaa">jquery does not work</a>

{% endblock %}

js

$(document).ready(function() {
        //$('#test').submit(function(event) {
        $('#test').click(function(event) {
                var user_id = $('#test').val();
                alert(user_id);
                event.preventDefault();
                var form = $(this);
                $.ajax({
                        url: "http://xxx/yyy/ajax_post_select/",
                        type: "POST",
                        dataType: "json",
                        data: {
                                'user_id': user_id
                        },
                        beforeSend: function(xhr, settings){
                                if(!csrfSafeMethod(settings.type)&&!this.crossDomain){
                                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                                }
                        },
                        success:function(data){
                                console.log(data);
                                jQuery('#posts').text(data);
                                for(var i =0; i<data.length; i++){
                                        alert(data[i]['title']);
                                }
                        },
                        error:function(req,text){
                                consol.log(text);
                        },
                })
        });
});

django

def ajax_post_select(request):
        import json
        from django.http import HttpResponse

        user_id = request.POST.get("user_id",'nothing')
        user = get_object_or_404(User, pk=user_id)
        propertys = user.property_set.all().order_by('create_date')
        data = [dict(title=property.title, place=property.place)for property in propertys]
        json = json.dumps(data)
        return HttpResponse(json, content_type="application/json")

取得した『data』は下の部分にテーブルを作成してループで回したいと思っております。

<div id="posts"></div>

可能であれば下記のようなpythonの記述で回したいと思っております。

{% for property in propertys %}

view側をrenderに書き換えたり{'propertys': propertys}
などの記述に変えて色々試しておりましたが、できませんでした。
どなたかご回答いただければ幸いです。
以上よろしくお願いします。

Comments

[kei344]

「全くわからない」なら「JavaScriptを勉強してください」という回答になります。ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[退会済みユーザー]

おっしゃる通りjavascriptを勉強する事にいたします。
今だとtemplate側にpythonを書いてループ処理したいと思いながらも、javascriptでできればその方法でもよいというあいまいな質問になってしまっておりました。
今後は明確に質問できるようにいたします。

ご指摘いただきありがとうございました。

Answer 1

template側でpythonでループさせる方法はできませんでしたが、js内で<tr>と<td>を生成してtmplatesに埋め込む事で解決しました。
js一部抜粋

                        success:function(data){
                                console.log(data);
                                for(var i =0; i<data.length; i++){
                                        alert(data[i]['title']);
                                        $('#posts').append(
                                                $('<tr></tr>').append(
                                                        $('<td></td>')
                                                        .text(data[i]['title'])
                                                )
                                        )
                                }
                        },