Twigを使用して1モーダルでデータを読み込む方法

Question

データベースのデータを含むHTMLテーブルを作成しました。 1つのテーブル行のタイトルをクリックすると、その行のデータを含むモーダルが開きます。

<table> 
{% for item in items %} 
<tr> 
    <td> 
     <td><a href="#" data-toggle="modal" data-target="modal{{ item.id }}">{{ item.name }}</a></td> 
    </td> 
</tr> 
{% endfor %} 
</table> 

{% for item in items %} 
<div class="modal" id="modal{{ item.id }}"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <h5 class="modal-title">ID: {{ item.id }}</h5> 
     ... 
     </div> 
    </div> 
</div> 

それは今働いている、決して：については

は、今私はそれをこのように解決しました。しかし、あなたが見ることができるように、配列内の各アイテムに対してモーダルが作成されます。たとえば、配列に9000個のアイテムがある場合などです。私はHTMLで9000のモーダルを持っています。私はそれが良いことではないと思うので、1つだけのモーダルを使用し、そのIDに基づいてコンテンツを含める方法を探しています。

これを行うにはどうすればよいですか、またはtwigとPHP（symfonyフレームワークではなく、twigエンジンのみ）を使用してこれを行う最善の方法は何ですか？

Modal/TableにBootstrap 4を使用しています。

EDIT：

@entioは、同様の質問に私をリンクされたので、私はそれを試してみました。 まず、私はJSONに私の$tickets（すべてのデータを含む配列）をコードするentioの回答を追っ：

{% autoescape %} 
    var globalDataObject = {{ tickets|json_encode()|raw }}; 
{% endautoescape %} 

JSONオブジェクトは、次のようになります。

0: 
    0: "93" 
    1: "3" 
    2: "Testticket" 
    3: "0" 
    4: "" 
    5: "2017-12-08 14:43:21" 
    6: "0000-00-00 00:00:00" 
    7: "2017-12-08 14:43:21" 
    8: "test" 
    9: "Test" 
    description: "test" 
    subject: "Testticket" 
    closed_at: "0000-00-00 00:00:00" 
    closemessage: null 
    device: "Test" 
    customerid: "3" 
    last_answer: "2017-12-08 14:43:21" 
    opened_at: "2017-12-08 14:43:21" 
    state: "0" 
    ticketid: "93" 
1: 
    0: "94" 
[...] 

私の問題は、今では私ドンでありますこのjsonオブジェクトにアクセスする方法を知っていません。 entioのリンクされた質問の答えは私を助けません。私の現在のコード（リンクの答えのいくつかの変更とコピー％ペースト）：

<script type="text/javascript"> 
    {% autoescape %} 
    var globalDataObject = {{ tickets|json_encode()|raw }}; 
    {% endautoescape %} 

    (function($) { 
    var myModal = $('#ticketModal'); 
    $('#subject').on('click', function(){ 
     $.ajax({ 
      type: 'GET', 
      url: 'home.php?ticketid='+$(this).data('id'), 
      dataType: 'json', 
      success: function(data){ 
      htmlData = '<h1>Test:'+data.subject'; 
      myModal.find('.modal-body').html(htmlData); 
      modal.modal('show); 
      } 
     }); 
     return false; 
    }); 
})(jQuery); 
</script> 

私のテーブルの行のHTMLコードに変更されています

<td><a href="#" id="subject" data-id="{{ ticket.ticketid }}">{{ ticket.subject}}</a></td> 

だから、すべての行のデータ-IDテーブルにはデータベースIDがあります。 Jsonで適切なアイテムを検索し、jsonオブジェクトからデータを含むModalを開く方法はありますか？

現在のJavascriptコードは機能していません。私はそれがglobalDataObjectにアクセスすることはないからだと思います。

Answer 1

JSを使用したくない場合は、すべてのノードを生成する必要があります。

それ以外の場合は、すべてのデータを含むオブジェクトをJSに渡すだけで、クリックイベントをモーダルに動的に作成させることができます。 JSONに解析はjson_encodeフィルタで行うことができます。 Load JSON data into a Bootstrap modal