title: How do I pass an Array to Bootstrap Modal?
body: <p>I load the page with a table and loop through my array throwing all the variables in attributes of the button in the table. My question, is it possible to pass an array to a modal window? My goal is to see which groups exist for the accounts and check a box displaying the box they belong to. I have not wrote the code to check the box yet as I am unable to retrieve the data from the array.</p>
  <p>JSON:
  &quot;element&quot;: [
  {
  &quot;account&quot;: &quot;accountname&quot;,
  &quot;name&quot;: &quot;name&quot;,
  &quot;subelement&quot;: [
  {&quot;groups&quot;: &quot;group1&quot;},
  {&quot;groups&quot;: &quot;group2&quot;},
  {&quot;groups&quot;: &quot;group3&quot;},
  ]
  },
  {
  &quot;account&quot;: &quot;accountname2&quot;,
  &quot;name&quot;: &quot;name2&quot;,
  &quot;subelement&quot;: [
  {&quot;groups&quot;: &quot;group1&quot;},
  {&quot;groups&quot;: &quot;group2&quot;},
  {&quot;groups&quot;: &quot;group3&quot;},
  ]
  }
  ]</p>
  <p>HTML/PHP that builds the table:</p>
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
  &lt;th&gt;More&lt;/th&gt;
  &lt;th&gt;Account&lt;/th&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;?php
  foreach($newResults['element'] as $item)
  {
  echo '&lt;tr&gt;';
  echo '&lt;th scope=&quot;row&quot;&gt;&lt;button class=&quot;btn btn-primary btn-sm&quot; 
  account-type=&quot;'.$item['account'].'&quot; 
  name-type=&quot;'.$item['name'].'&quot; 
  groups-type=&quot;'.json_encode($item['subelement']).'&quot;
  data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modifyUser&quot;&gt;More&lt;/button&gt;&lt;/th&gt;';
  echo '&lt;td&gt;'.$item['account'].'&lt;/td&gt;';
  echo '&lt;td&gt;'.$item['name'].'&lt;/td&gt;';
  echo '&lt;/tr&gt;';
  }
  ?&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
   &lt;!-- Modal --&gt;
  &lt;div class=&quot;modal fade&quot; id=&quot;modifyUser&quot; tabindex=&quot;-1&quot; aria-labelledby=&quot;modifyUserLabel&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;div class=&quot;modal-dialog modal-xl&quot;&gt;
   &lt;div class=&quot;modal-content&quot;&gt;
    &lt;div class=&quot;modal-header p-1 mb-1&quot;&gt;
  &lt;h5 class=&quot;modal-title pe-2&quot; name=&quot;modal-title&quot; id=&quot;modal-title&quot;&gt;Name&lt;/h5&gt;
  &lt;div align=&quot;center&quot; id=&quot;countdown&quot;&gt;&lt;/div&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
  &lt;/div&gt;
      &lt;div class=&quot;modal-body&quot;&gt;
  &lt;form id=&quot;modalform&quot;&gt;
       &lt;div class=&quot;row p-1 mb-1 bg-secondary text-white rounded&quot;&gt;
  &lt;div class=&quot;col-sm&quot;&gt;
  &lt;label&gt;Account&lt;/label&gt;
  &lt;input class=&quot;form-control&quot; name=&quot;account&quot; type=&quot;text&quot; id=&quot;account&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-sm&quot;&gt;
  &lt;label&gt;Name&lt;/label&gt;
  &lt;input class=&quot;form-control&quot; name=&quot;name&quot; type=&quot;text&quot; id=&quot;name&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col&quot;&gt;
  &lt;ul class=&quot;list-group&quot;&gt;
  &lt;div class=&quot;bg-warning text-dark rounded-top&quot; align=&quot;center&quot;&gt;&lt;h6&gt;Driver Type&lt;/h6&gt;&lt;/div&gt;
  &lt;li class=&quot;list-group-item&quot;&gt;
  &lt;input class=&quot;form-check-input me-1&quot; type=&quot;checkbox&quot; name=&quot;group1&quot; id=&quot;group1&quot;&gt;Group 1
  &lt;/li&gt;
  &lt;li class=&quot;list-group-item&quot;&gt;
  &lt;input class=&quot;form-check-input me-1&quot; type=&quot;checkbox&quot; name=&quot;group2&quot; id=&quot;group2&quot;&gt;
  Group2
  &lt;/li&gt;
  &lt;li class=&quot;list-group-item&quot;&gt;
  &lt;input class=&quot;form-check-input me-1&quot; type=&quot;checkbox&quot; name=&quot;group3&quot; id=&quot;group3&quot;&gt;Group3
  &lt;/li&gt;
  &lt;/ul&gt;  
  &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>$('#modifyUser').on('show.bs.modal', function (e) {
  var opener=e.relatedTarget;
    
  //we get details from attributes
    var account=$(opener).attr('account-type');
    var name=$(opener).attr('name-type');
    var groups=$(opener).attr('groups-type');
    var myJson=JSON.parse(groups);
    console.log(&quot;test: &quot;+myJson);
  
  //Populate Modal
  $('#modalform').find('[name=&quot;account&quot;]').val(account);
  $('#modalform').find('[name=&quot;name&quot;]').val(name);
  })
  </code></pre>
  <p>Any and all help is appreciated!</p>