json配列から動的にhtmlリストを生成する方法

私は、ユーザーがプレイリストにトラックを追加できるようにするアプリを作成しようとしているDjango初心者です。セッションを使用して、ビュー内のトラックID文字列のリストを生成し、シリアル化された配列でhttp応答を返します。問題は、順序付きリストを構築するためにテンプレート内の配列を繰り返し処理しようとすると、正しくフォーマットされないということです。これは、予想される箇条書きのHTMLリストの代わりに、Pythonのリストとして表示されます。json配列から動的にhtmlリストを生成する方法

ご協力いただければ幸いです！

本部

<!DOCTYPE html> 

<div id="playlist"> 
<ol> 
{% for track in playlist %} 
    <li>{{track}}</li> 
{% endfor %} 
</ol> 
</div> 
</html>

javascriptの

<script type="text/javascript"> 
    $(document).on('submit', '.track_form', function() { 
     var $form = $(this); 
      $.ajax({ 
       url: $form.attr('action'), 
       data: $form.serialize(), 
       type: $form.attr('method'), 
       success: function (data) { 

        $("#playlist").html(data); 
       }, 
       error: function(data) { 
        console.log('There was a problem'); 
       } 
      }); 
      return false;  
     }); 
</script>

あなたが要求を行うためにAJAX呼び出しを使用しているので、あなたはJavaScriptでHTMLリストを作成する必要があり

def artistpage(request): 
    if request.method == 'POST': 
     session_playlist = request.session.get('session_playlist', []) 
     tname = str(request.POST.get('track_name')) 
     session_playlist.append(tname) 
     request.session['session_playlist'] = session_playlist 

     return HttpResponse(json.dumps(session_playlist))

出典

2017-07-30 arshadic

しかし、Ajax呼び出しから返された結果を反復処理しているわけではありません。あなたはちょうどそれを#playlist divに直接ダンプします。 –

どのように結果を反復処理するのですか？私はそれが問題だと思ったが、適切な解決法に接近する方法がわからない。 – arshadic

Vivekはあなたにそれを行う一つの方法を示した。別の方法は、HTMLの内部部分に似た、スタンドアロンのテンプレートフラグメントをレンダリングし、JSONではなく、それを返すようにビューを変更することです。それを直接HTMLに挿入することができます。 –

ビューコード。この場合、Djangoテンプレートは動作しません。あなたのajax呼び出しが成功を返すと、このようなリストHTMLを作成することができます。

<script type="text/javascript"> 
$(document).on('submit', '.track_form', function() { 
    var $form = $(this); 
     $.ajax({ 
      url: $form.attr('action'), 
      data: $form.serialize(), 
      type: $form.attr('method'), 
      success: function (data) { 
       var list_html = "<ol>"; 
       for(var i=0; i <data.length; i++) { 
        list_html += "<li>" + data[i] + "</li>"; 
       } 
       list_html += "</ol>" 
       $("#playlist").html(list_html); 
      }, 
      error: function(data) { 
       console.log('There was a problem'); 
      } 
     }); 
     return false;  
    });

あなたのHTMLは次のようになります。

<!DOCTYPE html> 
    <div id="playlist"> 
    </div> 
</html>

このように表示されるはずです。

def artistpage(request): 
    if request.method == 'POST': 
     session_playlist = request.session.get('session_playlist', []) 
     tname = str(request.POST.get('track_name')) 
     session_playlist.append(tname) 
     request.session['session_playlist'] = session_playlist 

     return HttpResponse(json.dumps(session_playlist), content_type="application/json")

出典

2017-07-30 18:46:30 viveksyngh

ありがとうVivek！私はこれを試して、 – arshadic

が動作すると報告しますが、リスト内のすべての文字列ではなく、文字列のすべての文字を新しいリスト項目として出力します。オリジナルのajaxデータは['track1_id'、 'track2_id'、 'track3_id']のように見えます – arshadic

ここで受け取ったデータをここに貼り付けることができますか？ – viveksyngh

json配列から動的にhtmlリストを生成する方法

答えて

関連する問題